title: Google Maps Route Generation with Waypoints
body: <p>I've got an existing app that tracks vehicles and renders their polyline on a map, and I want to be able to import these polylines into another app using the routing service (so that the imported polyline snaps to the road and can be dragged around etc).</p>
  
  <p>What I'm currently doing is encoding:</p>
  
  <pre><code>var encoded_path = google.maps.geometry.encoding.encodePath(coordinate_array)
  </code></pre>
  
  <p>The lat lng coordinates array that draws the line (inside the polyline app), and passing this into the directions service route like so (inside the other app):</p>
  
  <pre><code>var coordinates = google.maps.geometry.encoding.decodePath(encoded_path);
  
  var request = {
     origin: coordinates[0],
     destination: coordinates[coordinates.length - 1],
     travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  
  MapService.directionsService.route(request, function(response, status) {
     if (status == google.maps.DirectionsStatus.OK) {
        MapService.directionsDisplay.setDirections(response);
     }
  });
  </code></pre>
  
  <p>The problem with this approach is that it's only using the start and end of the polyline to draw the route, so all of the diversions along the route are not shown. So I tried to add waypoints (Google has a limit of 8) to try and get a slightly more accurate route like so:</p>
  
  <pre><code>var waypoints = [];
  
  if (coordinates.length &lt;= 8) {
     waypoints = coordinates;
  }
  else {
     for (var i = 0; i &lt; 8; i++) {
        var index = Math.floor((coordinates.length/8) * i);
  
        // Break if there's no more waypoints to be added
        if (index &gt; coordinates.length - 1)
           break;
  
        waypoints.push(new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng()));
  
        // Break if we've just added the last waypoint
        if (index == coordinates.length - 1)
           break;
     }
  }
  </code></pre>
  
  <p>This way it gets waypoints evenly across the coordinates array. And then I'm trying to display them like so on my call to route:</p>
  
  <pre><code>var request = {
     origin: coordinates[0],
     destination: coordinates[coordinates.length - 1],
     waypoints: waypoints
     travelMode: google.maps.DirectionsTravelMode.DRIVING
  };
  </code></pre>
  
  <p>But I'm getting this error: Error: in property waypoints: at index 0: unknown property lb</p>
  
  <p>Does anyone know what could be happening, or how to do this waypoint stuff? I can confirm that the array is correctly generated through the console, here's an example of the first array element:</p>
  
  <pre><code>Array[8]
    0: N
      lb: -22.39019
      mb: 143.04560000000004
      __prot__: N
    1:...etc etc
  </code></pre>
  
  <p>Thank you.</p>