CODEWITHSUNDEEP
google-maps
Purusartha
Purusartha

Reputation: 1010

Using Google Maps 3 API to get multiple routes on a Map

I am working on a Vehicle Routing Problem. Recently I have spent a bit of time going through Google Maps API to see if I can print multiple routes on the same map. I would like the following: route1: point a, b, c, a route 2 point a, d, e, f, a route 3 point a, g, h, a and I would like each route to have a different color polyline. Can someone help me with this.

Upvotes: 17

Views: 48673

Answers (1)

Bill Blankenship
Bill Blankenship

Reputation: 3356

Yeah, this is pretty simple, once you get the hang of it.

You want to use the directionsRenderer object.

The big thing is that you want your routes all set up in array, then you want to iterate through them via a loop. Creating a new directionsRenderer object each time and setting it to the map each time. Inside the loop you will also want to create a new polyline variable that you pass to the directionsRenderer with a different color each time. I use to have some code that did this but don't know where it is at at the moment.

Here is an example of someone using different color polylines. :

http://www.geocodezip.com/violette_com_TestMap2c.html

If you focus on these two below lines of code you will see how the polyline color is set and also how it is passed to the directionsRenderer.

directionsDisplayActual = new google.maps.DirectionsRenderer({suppressMarkers: true, polylineOptions: polylineOptionsActual})

var polylineOptionsActual = {
      strokeColor: '#FF0000',
      strokeOpacity: 1.0,
      strokeWeight: 10
      };

Next waypts for your routes. :

http://code.google.com/apis/maps/documentation/javascript/examples/directions-waypoints.html

Another good example.

var request = {
    origin: start, 
    destination: end,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {

If you focus on the above code in the google example provided you will see waypts var. That is where your inbetween marker will be set (as you say point b). You will do this by doing a waypts.push(.....). The origin and destination will be your point a and point b.

Shouldn't be too difficult to slap something together. I would suggest grabbing a google example closest to your needs and skimming it down to a simple project and then building it up from there.

Upvotes: 26

Related Questions