[Google Maps] How to show multiple routes on a map?
Forge component by Labs
Published on 14 Dec 2020
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!

Rank: #308
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?
Rank: #440

Hi Carlos,

Need your help to know that how I can add multiple routes with multiple waypoints for each in Map. Do I need to use RouteMap from component. It will be helpful if you can tell that in which parameter need to send this information and what will be the format of this.


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.

Rank: #308
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?
Rank: #308
In case you're wondering where is the Pamplona route I was talking about, I got the screenshot wrong: here it is.
Rank: #21118


Is there a way to this in the mobile component?