Draw line between given coordinates using Google Map API

Question

Possible Duplicate:
polyline snap to road using google maps api v3

My usecase is very common but somehow not finding right solution. I keep recording the coordinates of a moving vehicle and then display the predefined route along with the traveled path. The predefined route and traveled path should be displayed in different color. For displaying predefined path I am using DirectionsService.route. And for traveled path I tried different approaches and none of them worked perfectly.

1. Draw a Polyline between all the coordinates recorded in path traveled. But in case turn falls between 2 recorded coordinates then the line directly joins the points ignoring the turn.

   var line = new google.maps.Polyline({ path: arr_all_coordinates, strokeColor: "red", strokeOpacity: 1, strokeWeight: 1 });

2. Use new DirectionsRenderer objects to form a route between 2 consecutive coordinates and display with DirectionsService.route till the last coordinate. In this case map keep jumping to the last 2 coordinates and gives focus to the last route drawn. I tried setting preserveViewport to true but didnt work.

   directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsRenderer.setDirections(response); }

Any suggestion please.

Answer 1

This is basically the same problem as drawing a line that snaps to roads. See my solution for that problem: polyline snap to road using google maps api v3