Recently when using the DirectionsService with “waypoints” between the origin and destination locations for our application, we’ve been getting these “zig-zag” routes returned that make no sense visually.
What it looks like, is everything is going just fine, but somewhere after the 7th waypoint, the route takes a dramatic zig-zag back towards an earlier waypoint, then appears to try to correct itself back to the proper path.
I’ve attached an image to show what I’m trying to say, and pointed out the point where things go awry in red. In addition, I’ve included the sample code below, and posted a working demonstration of the problem here:
http://dev.anytraq.com:8080/test.html (working version)
I was wondering if anyone here has encountered such a problem, or can shed any light into what might be going on? As you can see below, the code is really straightforward….Basically we just define an origin and destination LatLng object, and 8 waypoints in between, then send it of to the DirectionsService.
I’d appreciate any and all suggestions that might come to mind, I’m totally stumped.
<!DOCTYPE html>
<html>
<head>
<title>ZigZagged Directions Example</title>
<meta charset="UTF-8">
<style type="text/css">
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
// map options
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// the map
map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
// directions service
directionsService = new google.maps.DirectionsService();
// Define our origin position, the start of our trip.
originPosition = new google.maps.LatLng('37.66258', '-121.87058');
// Define 8 waypoints to place between the origin and the destination
waypoint1 = new google.maps.LatLng('37.65638', '-121.87750');
waypoint2 = new google.maps.LatLng('37.64333', '-121.88174');
waypoint3 = new google.maps.LatLng('37.63676', '-121.88447');
waypoint4 = new google.maps.LatLng('37.60746', '-121.87343');
waypoint5 = new google.maps.LatLng('37.57868', '-121.87702');
waypoint6 = new google.maps.LatLng('37.56368', '-121.90382');
waypoint7 = new google.maps.LatLng('37.54175', '-121.92334');
waypoint8 = new google.maps.LatLng('37.51806', '-121.94201');
// push the waypoints defined above into an array
wayPointArray = new Array();
wayPointArray.push({location: waypoint1, stopover: false});
wayPointArray.push({location: waypoint2, stopover: false});
wayPointArray.push({location: waypoint3, stopover: false});
wayPointArray.push({location: waypoint4, stopover: false});
wayPointArray.push({location: waypoint5, stopover: false});
wayPointArray.push({location: waypoint6, stopover: false});
wayPointArray.push({location: waypoint7, stopover: false});
wayPointArray.push({location: waypoint8 , stopover: false});
// define our definition position, the last stop of our trip
destinationPosition = new google.maps.LatLng('37.50162', '-121.93034');
var request = {
origin: originPosition,
destination: destinationPosition,
waypoints: wayPointArray,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.DirectionsUnitSystem.METRIC,
optimizeWaypoints: false
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var polyOpts = {
strokeOpacity: 1.0,
strokeColor: '#0000FF',
strokeWeight: 2
}
var directionsDisplayOptions = {
suppressMarkers: false,
suppressInfoWindows: false,
preserveViewport: false,
polylineOptions: polyOpts
};
directionsRenderer = new google.maps.DirectionsRenderer(directionsDisplayOptions);
directionsRenderer.setMap(map);
directionsRenderer.setDirections(response);
} else {
console.info('could not get route');
console.info(response);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
This is a bug in the rendering.
The line drawn on the map following the “Merge on to I-680” is given by this encoded string, which appears in the JSON response from the Directions Service:
Professor Mark McClure of the University of North Carolina has a decoder at http://facstaff.unca.edu/mcmcclur/GoogleMaps/EncodePolyline/decode.html which can produce the list of points that line represents. He also has a utility which will take a list of points, produce an encoded string and show that on a map. Decoding that string and then plotting the resulting map yields this:
This doesn’t show the deviations. Thus the line which the Directions Service supplies to be drawn (defined by its data) is correct, but the rendering is not. It’s probably relevant that McClure’s page uses Version 2 of the API rather than Version 3 and consequently can render the data correctly.
Bugs should be reported here: http://code.google.com/p/gmaps-api-issues/issues. I suggest you reference this question as well as providing as much detail as possible in the report.