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

Forge Component
Published on 6 Aug (2 weeks ago) by Labs
36 votes
Published on 6 Aug (2 weeks ago) by 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!

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.


Is there a way to this in the mobile component?