Why does the Google Maps DirectionsService return different routes?

google-maps, google-maps-api-3, javascript

Solution

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);
 }

Problem

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?

Original source