Unsupported link when using more than one waypoint

[armin23615]

RN version: 0.60 Package version: 2.1.1

This is the data I supplay to getDirections method: const data = { source: { latitude: Number(checkpoints[0].address.lat), longitude: Number(checkpoints[0].address.lng), }, destination: { latitude: Number(checkpoints[numOfCheckpoints - 1].address.lat), longitude: Number(checkpoints[numOfCheckpoints - 1].address.lng), }, 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 }, ], waypoints: [ { latitude: 39.810355, longitude: -86.135126 }, { latitude: 40.810355, longitude: -86.135126 }, ], }

I'm getting error inside maps: Google maps can't open this link. When I use only one waypoint it works fine though.

I have my url in log: 'https://www.google.com/maps/dir/?api=1&travelmode=driving&dir_action=navigate&destination=39.881652%2C-83.057822&origin=41.925685%2C-88.122813&waypoints=39.810355,-86.135126|40.810355,-86.135126'

[issue-label-bot[bot]]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.66. Please mark this comment with :thumbsup: or :thumbsdown: to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[kristianmilev1]

In index.js under react-native-google-maps-directions directory in node_modules if you change the method const getParams = (params = []) => { return params .map(({ key, value }) => { const encodedKey = encodeURIComponent(key) const encodedValue = encodeURIComponent(value) return${encodedKey}=${encodedValue} }) .join('&') } to const getParams = (params = []) => { return params .map(({ key, value }) => { // const encodedKey = encodeURIComponent(key) // const encodedValue = encodeURIComponent(value) return${key}=${value} }) .join('&') } it will work

[Areskyb]

@kristianmilev1 I don't really see the difference in your code..

[alexeyvax]

There is an issue with multiple waypoints. Regarding the docs https://developers.google.com/maps/documentation/urls/get-started#parameters_1, characters like | inside waypoints should be converted to %2C. But if we follow to @kristianmilev1 suggestion, all works good for google app and browser on android and ios.

I guess when we use Linking.openURL(url) with no escaped characters like , or | this method do it for us internally. Correct me please if I'm wrong.

So just copy code

// old
const getParams = (params = []) => {
  return params
    .map(({ key, value }) => {
      const encodedKey = encodeURIComponent(key)
      const encodedValue = encodeURIComponent(value)
      return `${encodedKey}=${encodedValue}`
    })
    .join('&')
}

to

// new
const getParams = (params = []) => {
  return params
    .map(({ key, value }) => {
      return `${key}=${value}`;
    })
    .join('&');
};

[AndriesJacobus]

There is an issue with multiple waypoints. Regarding the docs https://developers.google.com/maps/documentation/urls/get-started#parameters_1, characters like | inside waypoints should be converted to %2C. But if we follow to @kristianmilev1 suggestion, all works good for google app and browser on android and ios.

I guess when we use Linking.openURL(url) with no escaped characters like , or | this method do it for us internally. Correct me please if I'm wrong.

So just copy code

// old
const getParams = (params = []) => {
  return params
    .map(({ key, value }) => {
      const encodedKey = encodeURIComponent(key)
      const encodedValue = encodeURIComponent(value)
      return `${encodedKey}=${encodedValue}`
    })
    .join('&')
}

to

// new
const getParams = (params = []) => {
  return params
    .map(({ key, value }) => {
      return `${key}=${value}`;
    })
    .join('&');
};

I tried this @alexeyvax, and multiple waypoints are working for me now 💪