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

Back to Forums

Gonçalo Azambujo

Question

Forge

Maps

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

20 May 2016

Carlos Filipe Simões

Staff

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?

20 May 2016

1 reply

23 Dec 2020

Show thread

Hide thread

vikas sharma

Champion

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

23 Dec 2020

Gonçalo Azambujo

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

20 May 2016

Carlos Filipe Simões

Staff

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?

20 May 2016

Carlos Filipe Simões

Staff

In case you're wondering where is the Pamplona route I was talking about, I got the screenshot wrong: here it is.

23 May 2016

Mário Amorim

Hi,

Is there a way to this in the mobile component?

Thanks

08 Jan 2018

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines