Open Google Maps / Maps in

Question

I try to open Google maps or maps in my reaction-based application, but when I run the application in my Iphone / simulator, I get the error message "I don’t know how to open URI: ...". What am I doing wrong?

My code is:

openGps() {
  var url = 'geo:37.484847,-122.148386'
  this.openExternalApp(url)
}

openExternalApp(url) {
  Linking.canOpenURL(url).then(supported => {
    if (supported) {
      Linking.openURL(url);
    } else {
      console.log('Don\'t know how to open URI: ' + url);
    }
  });
}

Answer 1

To open a URL with a custom ios / android shortcut:

const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
const latLng = '${lat},${lng}';
const label = 'Custom Label';
const url = Platform.select({
  ios: '${scheme}${label}@${latLng}',
  android: '${scheme}${latLng}(${label})'
});


Linking.openURL(url); 

Answer 2

This is because iOS does not yet support geo:, as mentioned in this SO answer . What you can do is determine the OS and:

• use geo:on android
• iOS -. , maps:, Apple Maps, , . URL- Google Maps Google .

openGps :

openGps = (lat, lng) => {
  var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:';
  var url = scheme + '${lat},${lng}';
  Linking.openURL(url);
}

Answer 3

:

Android:

 <TouchableOpacity onPress={() => Linking.openURL('google.navigation:q=100+101')}>

q - +

IOS:

  <TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=100+101&daddr=100+102')}>

saddr - , daddr - lat + long

Answer 4

const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  android: "geo:" + latitude + "," + longitude + "?q=" + label
});
Linking.openURL(url);

, Google ,

const latitude = "40.7127753";
const longitude = "-74.0059728";
const label = "New York, NY, USA";

const url = Platform.select({
  ios: "maps:" + latitude + "," + longitude + "?q=" + label,
  android: "geo:" + latitude + "," + longitude + "?q=" + label
});

Linking.canOpenURL(url).then(supported => {
  if (supported) {
    return Linking.openURL(url);
  } else {
    browser_url =
      "https://www.google.de/maps/@" +
      latitude +
      "," +
      longitude +
      "?q=" +
      label;
    return Linking.openURL(browser_url);
  }
});

Answer 5

Work on Android with an address using the following:

Linking.openURL('https://www.google.com/maps/search/?api=1&query=address');

Replace addresswith your favorite address.

Answer 6

To complement the other answers, here is a fragment of adding a marker on Android:

    const location = '${latitude},${longitude}'
    const url = Platform.select({
      ios: 'maps:${location}',
      android: 'geo:${location}?center=${location}&q=${location}&z=16',
    });
    Linking.openURL(url);

If you need more detailed information about Android and Google maps, follow the documentation link: https://developers.google.com/maps/documentation/urls/android-intents