Why does the Google Maps DirectionsService return different routes?

Question

I have strange problem with the Google Maps DirectionsService. It returns me different routes if input data is the same. Here is a sample of my code

var path = [];
path.push(new google.maps.LatLng(51.10600101811778, 17.025117874145508));
path.push(new google.maps.LatLng(51.1047951799623,17.02278971672058));
path.push(new google.maps.LatLng(51.10456276619924, 17.02208161354065));
path.push(new google.maps.LatLng(51.10131895649719, 17.029248476028442));
path.push(new google.maps.LatLng(51.100331957810134, 17.033969163894653));
path.push(new google.maps.LatLng(51.10001867395775, 17.032413482666016));

for (var i = 0; i <path.length-1; i++) {
    var request = {
        origin: path[i],
        destination: path[i+1],
        travelMode: google.maps.DirectionsTravelMode.WALKING
    }

    directionsService.route(request, function(results, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            selected_path = selected_path.concat(results.routes[0].overview_path);
            poly.setPath(selected_path);
            poly.setMap(map);
        }
    })
}

First time after the call, a function draws a strange polyline that always connects the start point with end point:

The second time it is called, the function works well and the route is drawn properly:

It's only example of input static data. Normally I work with dynamic data on matrix and dynamic markers, but always the same goes on. Firstly, start point is connected with end point + strange connection between other points. Second call function works well. Does somebody of you have some clue how to solve this problem?

Answer 1

It's only a guess: I believe what's happening is the path is getting concatenated out of order, because the directions requests are asynchronous. (Data does not necessarily come back in order). What I did below is place each leg of the directions in order in an array, then flattening the array into a continuous list, and display only after the right number of requests came back successfully.

I couldn't reproduce your zigzag so I don't exactly know if this answer will really solve the problem.

// count number of directions requests that returned successfully
var count = 0;

for (var i = 0; i <path.length-1; i++) {
  var request = {
    origin: path[i],
    destination: path[i+1],
    travelMode: google.maps.DirectionsTravelMode.WALKING
  };

  // introduce variable scope to preserve value of i
  (function(i) {
     directionsService.route(request, function(results, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         selected_path[i] = results.routes[0].overview_path;
         count++;

         // draw path only if all segments are completed
         if(count == path.length-1) {
           //flatten selected_path into 1-d array
           selected_path = Array.prototype.concat.apply([], selected_path);
           poly.setPath(selected_path);
           poly.setMap(map);
         }
       }
     });
   })(i);
 }