open maps/google maps in react native
To open url with custom label ios/android:
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);
This is because iOS does not yet have support for geo:
yet as mentioned in this SO answer. What you can do is detect the OS and:
- use
geo:
on Android - handle iOS differently. Possibly use
maps:
as it will open up Apple Maps, though I'm unsure how to properly send the coordinates to it. Or maybe append it to a google maps HTTP URL and open it in the browser.
For example, your openGps
function could look like this:
openGps = (lat, lng) => {
var scheme = Platform.OS === 'ios' ? 'maps:' : 'geo:';
var url = scheme + `${lat},${lng}`;
Linking.openURL(url);
}
you can do like this:
Android:
<TouchableOpacity onPress={() => Linking.openURL('google.navigation:q=100+101')}>
where q
is the destination lat + long
IOS:
<TouchableOpacity onPress={() => Linking.openURL('maps://app?saddr=100+101&daddr=100+102')}>
where saddr
is start address and daddr
is destination address lat+long