Google Maps V3, javascript polylines snap to road with large number of points on the map

Question

Been stuck on this one for a while now, I have been working on an system that traces drivers trough an app on their mobile phone. Now i am working to show this on a website with google maps. Every 100 meters a gps location is logged in the database.

You can image I can have hundreds or even thousands of points on the map, with the code below it draws polylines between the points relatively smooth, even in large numbers.

I would like these polylines to snap to the closest road so that on the map the polylines are on the road and not next to it on corners etc. Also in the future I want to calculate the distance traveled with a good accuracy.

I have tried directionsService between the points on the map but it seems it has a limit of 8 or 10.

I had trouble finding other people with the same problem.

Any help or suggestions would be nice.

Below is the function I use to draw the polylines.

made the polyLines Array a global so its not declared in this function

function drawLines(userID, createdOn){
    var points = new Array;
    jQuery.ajax({
     type: "POST",
     url: "/wp-content/themes/default/ajax/get_coordinates.php",
     data: {userID: userID, createdOn: createdOn}
     }).done(function(msg) 
     {
        clearLines();
        var msg = JSON.parse(String(msg));

        for(var i = 0; i < msg.length; i++){
            points[i] = new google.maps.LatLng(msg[i].lat, msg[i].lng);
        }
        polyLines[0] = new google.maps.Polyline({
            path: points,
            strokeColor: "01357c",
            strokeOpacity: 1.0,
            strokeWeight: 3,
            geodesic: true,
            map: map 
        }); 
     });    
}
function clearLines(){
    for(var i = 0; i < polyLines.length; i++){
        polyLines[i].setMap(null);  
    }
    polyLines = [];
}

Answer 1

I didn't completely understand what you where trying to do in your response at first, after some more research if found this tutorial.

http://lemonharpy.wordpress.com/2011/12/15/working-around-8-waypoint-limit-in-google-maps-directions-api/

With some modification I made it work for my project. The only drawback is I'm afraid I am still limited too 2500 requests/day. With the waypoint limit on 10 that would make roughly 25.000 points I should be able to connect per day.

function createBatches(userID, createdOn){
        jQuery.ajax({
         type: "POST",
         url: "/wp-content/themes/default/ajax/get_coordinates.php",
         data: {userID: userID, createdOn: createdOn}
         }).done(function(msg) 
         {
            var msg = JSON.parse(String(msg));
            var batches = new Array;
            var itemsPerBatch = 10; 
            var itemsCounter = 0;
            var wayptsExist = msg.length > 0;

            while(wayptsExist){
                var subBatch = [];
                var subitemsCounter = 0;

                for (var i = itemsCounter; i < msg.length; i++) {
                    subitemsCounter++;
                    subBatch.push({
                        location: new google.maps.LatLng(msg[i].lat,msg[i].lng),
                        stopover: true
                    });
                    if (subitemsCounter == itemsPerBatch)
                        break;
                }
                itemsCounter += subitemsCounter;
                batches.push(subBatch);
                wayptsExist = itemsCounter < msg.length;
                itemsCounter--;
            }
            calcRoute(batches); 
        });
    }
    function calcRoute(batches){
        var combinedResults;
        var directionsResultsReturned = 0;
        for(var i = 0; i < batches.length; i++) {
            var lastIndex = batches[i].length - 1;
            var start = batches[i][0].location;
            var end = batches[i][lastIndex].location;

            var waypts = [];
            waypts = batches[i];
            waypts.splice(0, 1);
            waypts.splice(waypts.length - 1, 1);

            var request = {
                origin: start,
                destination: end,
                waypoints: waypts,
                travelMode: google.maps.TravelMode.DRIVING
            };
            directionsService.route(request, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    if (directionsResultsReturned == 0) {
                        combinedResults = result;
                        directionsResultsReturned++;
                    }
                    else {
                        combinedResults.routes[0].legs = combinedResults.routes[0].legs.concat(result.routes[0].legs);
                        directionsResultsReturned++;
                    }
                    if (directionsResultsReturned == batches.length){ 
                        directionsDisplay.setDirections(combinedResults);
                    }
                }
            });
        }
    }

Answer 2

I have a solution with it. :3 You can cut it to many path of location and use "waypoint" in googlemap direction, 1 direction limit 10 point :) ...

solution is: End point of direction1 is Start point of direction2

example code

Array_point.push({
    waypoint : Array_Waypoint
});
Deriction_Array.push({
        travelmode : travelmode,
        polyline : Array_point
});