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]

Issue-Label Bot is automatically applying the label bug to this issue, with a confidence of 0.66. Please mark this comment with 👍 or 👎 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 💪