0

I would like on a button press to be able to redirect a user to the google maps application and to drop a PIN on specific coordinates in google map app. So the user should just need to press Start Routing / Navigate to the dropped pin.

I've tried several solutions like: Building: 1) Linking.openURL(https://www.google.com/maps/search/?api=1&query=lat,long) 2) Using react-native-map-link and few others the similar.

Nothing works at the end. All of those solutions opens the GoogleMaps Application and point the screen exactly on the coordinates I've specified, but it does not place a pin on the map so the user can start the navigation.

Anyone have done it working so far?

Thanks!

user3673948
  • 99
  • 1
  • 2
  • 9
  • Open a Google maps app in navigation mode as specified in the documentation: https://developers.google.com/maps/documentation/urls/guide#directions-action – xomena Nov 25 '18 at 23:25
  • @xomena it does not work. It opens google maps app and centers the screen in the right place, but no PIN has been placed. When i open the same link in the browser works perfect, but opened from react-native app it does not. – user3673948 Nov 26 '18 at 18:03

2 Answers2

3

As some have specified, you'll need to use the directions format of the URL scheme provided by Google:

https://www.google.com/maps/dir/?api=1&destination=lat,long&dir_action=navigate

Without an origin parameter, Google Maps will default to users current location, also you'll want to add a dir_action to force directions.

I've abstracted a lot of this functionality to support the lowest common denominator between Apple maps and Google maps in a small lib called react-native-open-maps, hopefully, that may help.

Brandon R Him
  • 161
  • 5
0
<TouchableOpacity
    onPress={() => {
        let lat = filteredPlaces.coordinates.latitude;
        let lon = filteredPlaces.coordinates.longitude;
        if (this.state.platform === "android" || "web") {
            Linking.openURL(
                `https://www.google.com/maps/dir/?api=1&origin=` +
                this.state.myLat +
                `,` +
                this.state.myLon +
                `&destination=` +
                lat +
                `,` +
                lon +
                `&travelmode=driving`
            );
            } else {
                console.log("Something Went Wrong?")
            }
        }}
> `enter code here`BLAH BLAH BLAH <TouchableOpacity />

This Worked for me but, I'm still working on the iOS version now, hope it's not too late or if it is I hope you already figured it out LOL

Jesse McKinney
  • 1