Google Maps Route Generation with Waypoints - google-maps

Question

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).
What I'm currently doing is encoding:
var encoded_path = google.maps.geometry.encoding.encodePath(coordinate_array)
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):
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);
}
});
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:
var waypoints = [];
if (coordinates.length <= 8) {
waypoints = coordinates;
}
else {
for (var i = 0; i < 8; i++) {
var index = Math.floor((coordinates.length/8) * i);
// Break if there's no more waypoints to be added
if (index > 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;
}
}
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:
var request = {
origin: coordinates[0],
destination: coordinates[coordinates.length - 1],
waypoints: waypoints
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
But I'm getting this error: Error: in property waypoints: at index 0: unknown property lb
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:
Array[8]
0: N
lb: -22.39019
mb: 143.04560000000004
__prot__: N
1:...etc etc
Thank you.

Answer 1

waypoints.push(new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng()));
the 'waypoints' property of the DirectionsRequest object definition should be an Array of google.maps.DirectionsWaypoint object definitions https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsWaypoint
So, try:
waypoints.push(
{
location: new google.maps.LatLng(coordinates[index].lat(), coordinates[index].lng())
}
);