Google Maps API - Multiple snap to road polylines

Question

I inserted a polyline snap to road. It works fine. Now, I'd like to insert another separated polyline snap to road, in the same map. And it doesn't work fine. It systematically joins the end point of the first polyline to the start point of the second polyline.

Thanks for your help.

Here is my code

function initialize() {

var pos = new google.maps.LatLng(-26.431228,-69.572755);

var myOptions = {
    zoom: 5,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);


//FIRST POLYLINE SNAP TO ROAD

ChileTrip1 = [
    new google.maps.LatLng(-33.417723,-70.605018),
    new google.maps.LatLng(-33.022446,-71.551688)
    ];

var traceChileTrip1 = new google.maps.Polyline({
    path: ChileTrip1,
    strokeColor: "red",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path = snap_path.concat(result.routes[0].overview_path);
            traceChileTrip1.setPath(snap_path);
        }
    });
}

//SECOND POLYLINE SNAP TO ROAD

ChileTrip2 = [
    new google.maps.LatLng(-29.959694,-71.30825),
    new google.maps.LatLng(-32.778038,-71.181908)
];

var traceChileTrip2 = new google.maps.Polyline({
    path: ChileTrip2,
    strokeColor: "blue",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path = snap_path.concat(result.routes[0].overview_path);
            traceChileTrip2.setPath(snap_path);
        }
    });
}

    };
    window.onload = function() { initialize();};

score 4 · Accepted Answer · answered Aug 01 '13 at 12:53

The DirectionsService is asynchronous. Either clear the snap_path array inside the callback routine before using it or create 2 separate snap_path arrays:

function initialize() {

var pos = new google.maps.LatLng(-26.431228,-69.572755);

var myOptions = {
    zoom: 5,
    center: pos,
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById('map'), myOptions);

map.setCenter(pos);


//FIRST POLYLINE SNAP TO ROAD

ChileTrip1 = [
    new google.maps.LatLng(-33.417723,-70.605018),
    new google.maps.LatLng(-33.022446,-71.551688)
    ];

var traceChileTrip1 = new google.maps.Polyline({
    path: ChileTrip1,
    strokeColor: "red",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service1 = new google.maps.DirectionsService(),traceChileTrip1,snap_path1=[];
traceChileTrip1.setMap(map);
for(j=0;j<ChileTrip1.length-1;j++){
    service1.route({origin: ChileTrip1[j],destination: ChileTrip1[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path1 = snap_path1.concat(result.routes[0].overview_path);
            traceChileTrip1.setPath(snap_path1);
        } else alert("Directions request failed: "+status);        
    });
}

//SECOND POLYLINE SNAP TO ROAD

ChileTrip2 = [
    new google.maps.LatLng(-29.959694,-71.30825),
    new google.maps.LatLng(-32.778038,-71.181908)
];

var traceChileTrip2 = new google.maps.Polyline({
    path: ChileTrip2,
    strokeColor: "blue",
    strokeOpacity: 1.0,
    strokeWeight: 2
});

var service2 = new google.maps.DirectionsService(),traceChileTrip2,snap_path2=[];
traceChileTrip2.setMap(map);
for(j=0;j<ChileTrip2.length-1;j++){
    service2.route({origin: ChileTrip2[j],destination: ChileTrip2[j+1],travelMode: google.maps.DirectionsTravelMode.DRIVING},function(result, status) {
        if(status == google.maps.DirectionsStatus.OK) {
            snap_path2 = snap_path2.concat(result.routes[0].overview_path);
            traceChileTrip2.setPath(snap_path2);
        } else alert("Directions request failed: "+status);        
    });
}

    };
    window.onload = function() { initialize();};

working example

Note that the overview_path is "simplified" and will not necessarily follow the road. If you need the exact route you need to process through all the legs.

Google Maps API - Multiple snap to road polylines

1 Answers1