Compute path between 2 points with Google Map Direction Service

Question

I'm trying to draw a path between points on a map. I have an array of 2 points (for my tests). I can draw them on the map easily but it looks like the Direction Service is not working as expected.

This is what I should get according google map: enter image description here

But this is what I get: enter image description here

Here is the Jsfiddle.

And here is my testing code:

var map = undefined;

function initialize() 
{
    var mapOptions = {
        center: new google.maps.LatLng(-33.885026, 151.268316),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 14
    };
    map = new google.maps.Map(document.getElementById("map"), mapOptions);
}

jQuery(document).ready(function($)
{
    initialize();
    loadPaths(map);
});

function loadPaths(gmap)
{
    var latlngbounds = new google.maps.LatLngBounds(),
        infoWindow = new google.maps.InfoWindow(),
        pathPoints = [], 
        index=0,
        positions = [
        {latitude: "-33.88914",longitude: "151.25673"},
        {latitude: "-33.888",longitude: "151.2623"},
    ];

    // The fix
    positions.reverse();

    $.each(positions, function(k, v) {
        var myLatlng = new google.maps.LatLng(v.latitude, v.longitude);
        pathPoints.push(myLatlng);
        index++;
    });

    // Intialize the Path Array
    var path = new google.maps.MVCArray();

    // Intialise the Direction Service
    var service = new google.maps.DirectionsService();

    var iconSymbol = {
        path: 'M 40 20 L 80 20 L 100 40 L 100 140 L 20 140 L 20 40 Z',
        anchor: new google.maps.Point(60, 10),
        scale: 0.15,
        strokeColor: '#000000',
        strokeWeight: 1,
        fillColor: 'steelblue',
        fillOpacity: 0.8,
    };

    // Set the Path Stroke Color
    var poly = new google.maps.Polyline({
        map: gmap,
        strokeColor: '#dd0000',
        icons: [{
            icon: iconSymbol
        }]
    });

    // Draw the path for this vehicle
    // We compute the path between each point to follow the road
    for (var i = 0; i < pathPoints.length; i++) {
        // If it's not the last point
        if ((i + 1) < pathPoints.length) {
            var src = pathPoints[i];
            var des = pathPoints[i + 1];

            // We had the starting point to the poly path
            path.push(src);

            // We compute the path between the 2 points
            service.route({
                origin: src,
                destination: des,
                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                unitSystem: google.maps.UnitSystem.IMPERIAL
            }, function (result, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                    // We add the new computed points
                    for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
                        path.push(result.routes[0].overview_path[i]);
                    }
                }
            });
        }
    }

    // Set the path of the polyline to draw it
    poly.setPath(path);
}

UPDATE

I've fixed the issue of the path thanks to @anto But I still have an issue time to time, the path is not drew on the road. I think it's an asynchronous issue with the service callback function but I'm not sure how I can fix it. If I relaunch the script in jsfiddle it's working randomly, but sometime I end up with this kind of drawing:

enter image description here

UPDATE 2

It looks like using a recursive function is fixing most of it, except that my last point is not drawn: http://jsfiddle.net/maxwell2022/wY32u/11/

Compute path between 2 points with Google Map Direction Service

Answers (1)

Related Questions