react-native-maps: MapView addressForCoordinate method is throwing error as "Cannot read properties of undefined(reading apply)"

Bug report

Summary

I am trying to get the address onPress event by passing the coordinates to addressForCooordinate method but it throws error.

Environment info

react-native info output:


      react-native: 0.64.2
      react: 17.0.1
      react-native-maps: ^0.29.0

Code

          <MapView
          ref = {mapRef}
          provider={PROVIDER_GOOGLE} 
          style={[styles.map,{flex:1}]}
          showsUserLocation={true}
          followsUserLocation={true}
          loadingEnabled={true}
          showsMyLocationButton={true}
          mapType="standard"
          initialRegion={
              {
                latitude:position.latitude,
                longitude:position.longitude, 
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421
                }
            }
            onPress={getAddress}
        >
        <MapView.Marker
            coordinate={{latitude:position.latitude,longitude:position.longitude}}
            pinColor="red"
            draggable
            onDragEnd={(event)=>{setCoordinates(event.nativeEvent.coordinate)}}
        />

        </MapView>

 const getAddress = (e) => {
    mapRef.current.addressForCoordinate(e.nativeEvent.coordinate)
    .then((address) => {
      console.log('address', address); 
    }).catch((err) => {
      console.log('err', err); 
    })
  }

According to readme it should return promise with resolved address but throws error as Simulator Screen Shot - iPhone 12 - 2021-09-16 at 12 27 40

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 18 (1 by maintainers)

Commits related to this issue

docs: add support note for mapview's addressForCoordinate Resolves #3955 — committed to monholm/react-native-maps by monholm 2 years ago

Most upvoted comments

This is more a missing feature and a lack of documentation, than a bug. addressForCoordinate isn’t implemented for provider={"google"} on iOS.

@bruno-de-queiroz the following works on both Android and iOS, but not when using Google Maps on iOS.

import React, {useRef} from 'react';
import {StyleSheet} from 'react-native';
import MapView, {Region} from 'react-native-maps';

export default function App() {
  const mapRef = useRef<MapView>(null);

  const regionChangeCompleteHandler = async ({latitude, longitude}: Region) => {
    console.log(
      await mapRef.current?.addressForCoordinate({
        latitude,
        longitude,
      }),
    );
  };

  return (
    <MapView
      ref={mapRef}
      style={styles.mapView}
      onRegionChangeComplete={regionChangeCompleteHandler}
    />
  );
}

const styles = StyleSheet.create({
  mapView: {
    flex: 1,
  },
});

If anyone could open a pull request to clearly state in the docs that addressForCoordinate is Android and Apple Maps only, that would be extremely helpful. Also, if anyone could put together a new issue as a feature request, requesting this functionality for Google Maps on iOS? That will leave us with a much better chance of somebody picking up the task.

monholm on Mar 13, 2022