[Solved] Google Maps Adding Multiple Polylines

by


Basically the answer had to do with scoping and the use of call back methods solved this problem.Also as my research revealed a DirectionsRenderer needed to be created for each route. This was achieved by creating a DirectionsRenderer array and using a call back method passing the index value. This allowed the relevant routes to be plotted.

function setRoutes(){   

    var directionsDisplay = new Array();

    for (var i=0; i< startLoc.length; i++){

    var rendererOptions = {
        map: map,
        preserveViewport:true
    }
    directionsService = new google.maps.DirectionsService();

    var travelMode = google.maps.DirectionsTravelMode.DRIVING;  

    var request = {
        origin: startLoc[i],
        destination: endLoc[i],
        travelMode: travelMode
    };  

        directionsService.route(request,makeRouteCallback(directionsDisplay[i]));
    }   


    function makeRouteCallback(disp){
            return function(response, status){
            if (status == google.maps.DirectionsStatus.OK){
                console.log(response);
                disp = new google.maps.DirectionsRenderer(rendererOptions);     
                disp.setMap(map);
                disp.setDirections(response);
            }
        }   
    }

}

solved Google Maps Adding Multiple Polylines