Returned waypoint_order comes empty

Question

I am passing all waypoints with stopover set to true, but the waypoint_order is returned empty.

Yes, i have optimizeWaypoints set to true. This is basically a modified demo code.

Some more details goes here because i could not post it otherwise.

  var request = {
     origin: start,
     destination: finish,
     waypoints: waypts,
     optimizeWaypoints: true,
     travelMode: google.maps.TravelMode.DRIVING
  };


  directionsService.route(request, function(response, status) {

     if (status == google.maps.DirectionsStatus.OK) {

        directionsDisplay.setDirections(response);
        var route = response.routes[0];
        var summaryPanel = document.getElementById('directions_panel');

        summaryPanel.innerHTML = '';
        // For each route, display summary information.
        for (var i = 0; i < route.legs.length; i++) {
           var routeSegment = i + 1;
           summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
           summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
           summaryPanel.innerHTML += route.legs[i].end_address + '<br>';

           summaryPanel.innerHTML += 'distance text: ' + route.legs[i].distance.text + '<br><br>';
           summaryPanel.innerHTML += 'distance value: ' + route.legs[i].distance.value + '<br><br>';

           summaryPanel.innerHTML += 'duration text: ' + route.legs[i].duration.text + '<br><br>';
           summaryPanel.innerHTML += 'duration value: ' + route.legs[i].duration.value + '<br><br>';

           totalDistance += route.legs[i].distance.value;
           totalDuration += route.legs[i].duration.value;
        }

        summaryPanel.innerHTML += 'total distance: ' + totalDistance + '<br>';
        summaryPanel.innerHTML += 'total duration: ' + totalDuration + '<br>';

        document.getElementById('result').value = summaryPanel.innerHTML;

        summaryPanel.innerHTML += 'waypoint_order: [' + '<br>';

        for (var i=0; i < route.waypoint_order.count; i++) {
           var num = route.waypoint_order[i];
           summaryPanel.innerHTML += num + '<br>';
           // AllMarkers[i].setIcon("http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + (num + 1) +"|FF776B|000000")
        }

        summaryPanel.innerHTML += ']' + '<br>';

     }
  });

Answer 1

I had the same problem. The waypoint_order object comes empty. In my case the solution was to set the property stopover = true in each waypoint. I hope it can be useful.

Answer 2

waypoint_order is an array, it doesn't have a count property, that should be length.

for (var i=0; i < route.waypoint_order.count; i++) {
   var num = route.waypoint_order[i];
   summaryPanel.innerHTML += num + '<br>';
}

should be:

for (var i=0; i < route.waypoint_order.length; i++) {
   var num = route.waypoint_order[i];
   summaryPanel.innerHTML += num + '<br>';
}

working fiddle

code snippet:

var totalDistance = 0;
var totalDuration = 0;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map_canvas'));
  var directionsService = new google.maps.DirectionsService();
  var directionsDisplay = new google.maps.DirectionsRenderer({
    map: map
  });
  var start = "Bangor, ME";
  var finish = "Tampa, FL";
  var waypts = [{
    location: "Baltimore,MD",
    stopover: true
  }, {
    location: "Newark, NJ",
    stopover: true
  }, {
    location: "New York, NY",
    stopover: true
  }];

  var request = {
    origin: start,
    destination: finish,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  };


  directionsService.route(request, function(response, status) {

    if (status == google.maps.DirectionsStatus.OK) {

      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions_panel');

      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment + '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';

        summaryPanel.innerHTML += 'distance text: ' + route.legs[i].distance.text + '<br><br>';
        summaryPanel.innerHTML += 'distance value: ' + route.legs[i].distance.value + '<br><br>';

        summaryPanel.innerHTML += 'duration text: ' + route.legs[i].duration.text + '<br><br>';
        summaryPanel.innerHTML += 'duration value: ' + route.legs[i].duration.value + '<br><br>';

        totalDistance += route.legs[i].distance.value;
        totalDuration += route.legs[i].duration.value;
      }

      summaryPanel.innerHTML += 'total distance: ' + totalDistance + '<br>';
      summaryPanel.innerHTML += 'total duration: ' + totalDuration + '<br>';

      document.getElementById('result').value = (totalDistance / 1000).toFixed(2) + " km";

      summaryPanel.innerHTML += 'waypoint_order: [' + ' ';

      for (var j = 0; j < route.waypoint_order.length; j++) {
        var num = route.waypoint_order[j];
        summaryPanel.innerHTML += num + ' ';
        // AllMarkers[i].setIcon("http://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=" + (num + 1) +"|FF776B|000000")
      }

      summaryPanel.innerHTML += ']' + '<br>';

    }
  });
}
google.maps.event.addDomListener(window, 'load', initialize);

body,
html,
#map_canvas {
  height: 100%;
  width: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>
<div id="directions_panel"></div>
<input id="result" />