11

I have a requirement that on loading the google map application, have to automatically start the navigation.

Current scenario - It shows the route but user has to click on start to start navigation I couldn't find any flag associated for the same?

Found this article which shows the flags used in google maps

Official google maps docs shows to use it as dir_action=navigate but I am clueless on how to translate it into react-native-google-maps-directions package

Any idea how could we approach the problem?

Aseem Upadhyay
  • 4,279
  • 3
  • 16
  • 36
  • The `react-native-maps-directions` component makes a request to https://maps.googleapis.com/maps/api/directions/json ([source code](https://github.com/bramus/react-native-maps-directions/blob/master/src/MapViewDirections.js#L76)) whereas the `dir_action=navigate` parameter is associated with the map action request to https://www.google.com/maps/dir/?api=1&parameters. So they are different endpoints. Could you possibly put your code in a https://codesandbox.io/ project so we can explore other options? Have you tried triggering the start event somehow? – Iavor Mar 15 '18 at 16:43

4 Answers4

24

The react-native-maps-directions uses the Directions API to display routes. Please note that Directions API doesn't include any real-time navigation, it is meant only to show routes. The real-time navigation additionally is prohibited in the Google Maps APIs.

Have a look at the Google Maps API Terms of Service paragraph 10.4 (c, iii). It reads

No navigation. You will not use the Service or Content for or in connection with (a) real-time navigation or route guidance; or (b) automatic or autonomous vehicle control.

source: https://developers.google.com/maps/terms#10-license-restrictions

In order to be compliant with Google Maps API Terms of Service you should open the Google Maps app installed in your device using the Google Maps URLs in navigation mode. 

var url = "https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=Los+Angeles";
Linking.canOpenURL(url).then(supported => {
    if (!supported) {
        console.log('Can\'t handle url: ' + url);
    } else {
        return Linking.openURL(url);
    }
}).catch(err => console.error('An error occurred', err));

I hope this helps!

xomena
  • 31,125
  • 6
  • 88
  • 117
  • Oh I didnt't know that. Nice to know, thanks! Although I haven't tried your bit of code, I just had a preliminary doubt, if you call this url via `Linking` component, will the intent open? Or will it directly navigate to the application. @xomena – Aseem Upadhyay Mar 16 '18 at 17:46
  • @xomena, if I need draw route in real time, from user current location, do you know a solution for that in react-native ? If I will send requests to google maps directions API I will use all limits in few hours. And I cant find something else. Or it is not possible at all ? – Kholiavko Mar 26 '18 at 10:03
  • @Kholiavko get coordinates and draw route using polyline – Aseem Upadhyay Jul 24 '18 at 16:20
  • see this comment work 100% on React-native https://stackoverflow.com/a/61953286/2420700 – Vijay Chouhan May 22 '20 at 10:51
  • hi, how can i add latitude and longitude values in this url? i have only latitude and longitude values. Any solution? var url = "https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=Los+Angeles"; – Harika Aug 03 '21 at 06:35
  • @Harika According to documentation the origin and destination parameters `The value can be either a place name, address, or comma-separated latitude/longitude coordinates. `. So just add coma separated lat/lng in the url. Source: https://developers.google.com/maps/documentation/urls/get-started#directions-action – xomena Aug 04 '21 at 12:45
  • @ xomena Thanks for your reply. I tried this https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=lat,long it's working fine. – Harika Aug 05 '21 at 05:42
6

100% work

If you want to auto-start navigation from your current location to specific location https://developers.google.com/maps/documentation/urls/android-intents#launch_turn-by-turn_navigation

Sample Code

static googleMapOpenUrl = ({ latitude, longitude }) => {
    const latLng = `${latitude},${longitude}`;
    return `google.navigation:q=${latLng}`;
  }

To open google map on click React-Native will do like this

Linking.openURL(googleMapOpenUrl({ latitude: 23.235899, longitude: 78.323258 }));
Vijay Chouhan
  • 4,613
  • 5
  • 29
  • 35
1
    import getDirections from "react-native-google-maps-directions";
    ...

    handleGetDirections = () => {
        const data = {
            source: {
                latitude: originLatitude,
                longitude: originLongitude
            },
            destination: {
                latitude: destinaationLatitude,
                longitude: destinationLatitude
            },
            params: [
                {
                    key: "travelmode",
                    value: "driving"  // may be "walking", "bicycling" or "transit" as well
                },
                {
                    key: "dir_action",
                    value: "navigate" // this instantly initializes navigation using the given travel mode
                }
            ]
        }
        getDirections(data)
    }

Source: https://www.npmjs.com/package/react-native-google-maps-directions#install

Edgar Camberos
  • 33
  • 5
0

Add an intent to android/app/src/main/AndroidManifest.xml (a new requirement since Android 11 SDK 30):

<intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="google.navigation" />
</intent>

Use Linking.openURL with a universal, cross-platform URL to launch Google Maps e.g. The following example launches a map with bicycling directions from the Space Needle to Pike Place Market, in Seattle, WA:

Linking.canOpenURL(url).then((supported) => {
    if (supported) {
      Linking.openURL(`https://www.google.com/maps/dir/?api=1&origin=Space+Needle+Seattle+WA&destination=Pike+Place+Market+Seattle+WA&travelmode=bicycling`);
    } else {
      logger.error("Don't know how to open URI: " + url);
    }
  });

Sources

louiechristie
  • 93
  • 1
  • 7