[Google Maps] How to show multiple routes on a map?

[Google Maps] How to show multiple routes on a map?

  
Forge Component
(14)
Published on 4 Oct by OutSystems Labs
14 votes
Published on 4 Oct by OutSystems Labs
Hi all,

at the moment I have no issues showing one route on a map, but I have no idea how to show multiple routes on the same map...Anyone has already did this with the actions provided with this component? 
If yes, can you just explain me the logic that you use?

Thanks in advance!

Cheers
Hey, Gonçalo,

What you want is to add multiple sets of directions to the same map, displaying at the same time, right? I think that's covered by the component: every directions has a unique Id, so when you add additional ones, they will not clash.

Part of our testing procedure even involves adding and removing additional directions from a map. The only part that wasn't tested yet was adding over 2 routes.

Are you having any issues with this scenario?
Hi Carlos, 

thanks for your quick answer!

What I want to do  is show two diferent routes (or more) with diferents wayponts(specific or each one the routes) that could start on the same orgin point or not. More or less like it's on the attached image. 

Thanks for you help.
By looking at the Google Maps JS API documentation, I'd say you can: all you need is to pass an array of locations into the Directions Options field.

For example, here's a screenshot displaying two routes between Faro and Porto (stopping in Beja), Lisbon and Madrid (stopping in Badajoz, but passing in other places, such as Toledo) and finally Pamplona and Barcelona (no waypoints). This is the options I used for the second set of Directions:
"{
    waypoints: [
        {
            location: 'Badajoz, Spain',
            stopover: true
        },
        {
            location: 'Mérida, Spain',
            stopover: false
        },
        {
            location: 'Cárceres, Spain',
            stopover: false
        },
        {
            location: 'Toledo, Spain',
            stopover: false
        }
    ],
    optimizeWaypoints: true
}"
Would something like this do?
In case you're wondering where is the Pamplona route I was talking about, I got the screenshot wrong: here it is.