Drawing multiple route Google Map

Question

I would like to draw multiple routes based on the directions service in Google, the code goes below

p/s:Data is a list I obtained from my json call

for          


        

Answer 1

You need separate google.maps.DirectionsRenderer object for each route. Something like that:

var routes = [{origin: ..., destination: ...}, {origin: ..., destination: ...}, {origin: ..., destination: ...}];
var rendererOptions = {
    preserveViewport: true,         
    suppressMarkers:true,
    routeIndex:i
};
var directionsService = new google.maps.DirectionsService();

routes.each(function(route){
    var request = {
        origin: route.origin,
        destination: route.destination,
        travelMode: google.maps.TravelMode.DRIVING
    };

    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsDisplay.setMap(map);

    directionsService.route(request, function(result, status) {
        console.log(result);

        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);
        }
    });
});

I'm using prototype.js, so your method of array walking may differ.