MapView addressForCoordinate method is throwing error as "Cannot read properties of undefined(reading apply)"

[sarulathadurai]

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

[christopherdro]

@mechazod Any ideas?

[mechazod]

@sarulathadurai, please use onRegionChangeComplete #3911 (comment)

[sarulathadurai]

@mechazod same error is thrown

[huangzichenzuishuaile]

@sarulathadurai Have you solved this problem? I have the same problem now

[huangzichenzuishuaile]

@mechazod Have you solved this problem? I have the same problem now

[danieldanielecki]

#3911 (comment) isn't helpful for me either. The mapRef.current.addressForCoordinate returns TypeError: undefined is not an object (evaluating 'this.mapRef.current.addressForCoordinate').

Only mapRef.addressForCoordinate without current returns something meaningful, i.e., Invariant Violation: No callback found with cbID 12730 and callID 6365 for AIRMapManager.getAddressFromCoordinates - most likely the callback was already invoked. Args: '[{"locality":"Katwijk","subThoroughfare":"7A","subLocality":"(null)","postalCode":"2225 PA","administrativeArea":"South Holland","country":"Netherlands","subAdministrativeArea":"Katwijk","thoroughfare":"Bestevaerweg","countryCode":"NL","name":"Bestevaerweg 7A"}]', but that's still an exception...

It's all in onLongPress, becauase onRegionChangeComplete, as suggested in #3911 (comment), doesn't work. The onRegionChangeComplete returns TypeError: undefined is not an object (evaluating 'e.nativeEvent.coordinate') in both scenarios, with current, and without.

method.ts

export default async function getAddressFromCoordinate(this: any, e: any) {
  if (this.mapRef) {
    const { latitude, longitude } = e.nativeEvent.coordinate;
    await this.mapRef
      .addressForCoordinate({ latitude, longitude })
      .then((address: any) => {
        console.log("address", address);
      })
      .catch((err: Error) => {
        console.log("err", err);
      });
  }
}

component.tsx

<MapView
  onLongPress={async (e) => await getAddressFromCoordinate(e)}
  ref={(ref) => (this.mapRef = ref)}
>

[danieldanielecki]

@sarulathadurai, please reopen this issue, so the issue is visible in the issues.

Similarly, #3775 #3850 #3854 #3911 should stay open as well.

[sarulathadurai]

@sarulathadurai Have you solved this problem? I have the same problem now

No not yet

[00frank]

Nothing to do with this issue, but a workaround solution could be using a reverse geolocation api.
If you are developing this for a really small project or demo, you can use free Open Cage API and a the function could be exported like this, up to the devs add/merge/fix this package functionality.

import env from "../env.json" // your private api keys / tokens

export default async function (coords) {
  let { latitude, longitude } = coords;
  let resp = await fetch(`https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${env.geolocationServiceAPIKey}`)
  let data = await resp.json();

  return data.results[0] // this gets location info such as country, state, city, address...
}

[X0GT0X]

I have the same issue when using mapRef.current.addressForCoordinate inside the onPress callback for getting the address from coordinate. Have anyone got any solution for this to make it work on iOS? Using the another geo api is not a solution for me at all.

[danieldanielecki]

Not really, looks like a big issue :(

[bruno-de-queiroz]

For those in need, if you don't use google as map provider it will work on iOS

[danieldanielecki]

@bruno-de-queiroz can you share your code?
I've been debugging on iOS and same effect.

[monholm]

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.

[github-actions]

🎉 This issue has been resolved in version 0.31.0-beta.1 🎉

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 0.31.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀

[pejak4]

This isn't solved in version react-native-maps": "^1.7.1. Its working on Android but on iOS it still throws error Cannot read properties of undefined (reading 'apply').