Google Maps Javascript API Snap to roads multiple polygon

Question

I'm trying to code 2 independent snapped-to-road polygons created from 2 different arrays of lat lon points. When I change the code to only do one polygon, it looks great. But when I change the code to do both polygons, I get different polygons than I had seen when I had done one at a time. Also, I've noticed that the 2nd polygon no longer snaps-to-roads like it should and like I've seen when only coding for one polygon.

I'm pretty confused by this.. It seems like the JS API is struggling to put the polygon together and snap to roads. Is it too many lat/lon points?

I appreciate any and all help. Please don't hesitate to ask if I'm not providing enough info.

Here is my code:

<script>

function initMap() {

var pos = {lat: 29.744860,lng: -95.361302};

var myOptions = {
    zoom: 11,
    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

roadTrip1 = [

{lat: 29.596497, lng: -95.426788},
{lat: 29.540731, lng: -95.415950},
{lat: 29.533925, lng: -95.400490},
{lat: 29.526571, lng: -95.383886},
{lat: 29.493418, lng: -95.246661},
{lat: 29.429157, lng: -95.240067},
{lat: 29.475006, lng: -94.981166},
{lat: 29.652252, lng: -95.033159},
{lat: 29.637473, lng: -95.163095},
{lat: 29.596965, lng: -95.415699}
    ];

var traceroadTrip1 = new google.maps.Polygon({
   path: roadTrip1,
                    strokeColor: '#5c6670',
                    strokeOpacity: 0.8,
                    strokeWeight: 4,
                    fillColor: '#5c6670',
                    fillOpacity: 0.25
});

var service1 = new google.maps.DirectionsService(),traceroadTrip1,snap_path=[];
traceroadTrip1.setMap(map);
for(j=0;j<roadTrip1.length-1;j++){
    service1.route({origin: roadTrip1[j],destination:
    roadTrip1[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);
            traceroadTrip1.setPath(snap_path);
        }
    });
}


// SECOND POLYLINE SNAP TO ROAD
roadtrip2 = [
{lat: 29.704807, lng: -95.374714}, 
{lat: 29.753679, lng: -95.354992}, 
{lat: 29.770151, lng: -95.350105}, 
{lat: 29.813047, lng: -95.399361}, 
{lat: 29.780510, lng: -95.501962}, 
{lat: 29.731015, lng: -95.501280}, 
{lat: 29.678863, lng: -95.493037},
{lat: 29.678526, lng: -95.492811},
{lat: 29.696583, lng: -95.417439},  
{lat: 29.693119, lng: -95.413344}, 
{lat: 29.701318, lng: -95.374242}, 
{lat: 29.704807, lng: -95.374714} 
    ];

var traceroadtrip2 = new google.maps.Polygon({
    path: roadtrip2,
                    strokeColor: '#5c6670',
                    strokeOpacity: 0.8,
                    strokeWeight: 4,
                    fillColor: '#5c6670',
                    fillOpacity: 0.25
});

var service2 = new google.maps.DirectionsService(),traceroadtrip2,snap_path2=[];
traceroadtrip2.setMap(map);
for(j=0;j<roadtrip2.length-1;j++){
    service2.route({origin: roadtrip2[j],destination: roadtrip2[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);
        traceroadtrip2.setPath(snap_path2);
        }
    });
}


};


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





</script>
         <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API&signed_in=true&callback=initMap"></script>

score 0 · Answer 1 · edited May 23 '17 at 12:07

Your code is getting status OVER_QUERY_LIMIT and silently failing, if you add an alert when it fails, you will see the failures:

if(status == google.maps.DirectionsStatus.OK) {
  //...
} else alert("directions service 2 failed:"+status);

fiddle with added alert code

modify your code to handle the query limit, see this related question:

OVER_QUERY_LIMIT in Google Maps API v3: How do I pause/delay in Javascript to slow it down? (regarding the geocoder, but a similar strategy will work for the directions service)

Google Maps Javascript API Snap to roads multiple polygon

1 Answers1