6419
Views
6
Comments
[Google Maps] How to show multiple routes on a map?
Question
Forge component by Labs
46
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!

Cheers
Staff
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.

Regards

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.
MultipleRoutesExample.jpg

Staff
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?
Staff
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

Hi,

Is there a way to this in the mobile component?

Thanks