Compute path between 2 points with Google Map Direction Service - google-maps-api-3

Question

I'm trying to draw a path between points on a map. I have an array of 2 points (for my tests).
I can draw them on the map easily but it looks like the Direction Service is not working as expected.
This is what I should get according google map:
But this is what I get:
Here is the Jsfiddle.
And here is my testing code:
var map = undefined;
function initialize()
{
var mapOptions = {
center: new google.maps.LatLng(-33.885026, 151.268316),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 14
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
jQuery(document).ready(function($)
{
initialize();
loadPaths(map);
});
function loadPaths(gmap)
{
var latlngbounds = new google.maps.LatLngBounds(),
infoWindow = new google.maps.InfoWindow(),
pathPoints = [],
index=0,
positions = [
{latitude: "-33.88914",longitude: "151.25673"},
{latitude: "-33.888",longitude: "151.2623"},
];
// The fix
positions.reverse();
$.each(positions, function(k, v) {
var myLatlng = new google.maps.LatLng(v.latitude, v.longitude);
pathPoints.push(myLatlng);
index++;
});
// Intialize the Path Array
var path = new google.maps.MVCArray();
// Intialise the Direction Service
var service = new google.maps.DirectionsService();
var iconSymbol = {
path: 'M 40 20 L 80 20 L 100 40 L 100 140 L 20 140 L 20 40 Z',
anchor: new google.maps.Point(60, 10),
scale: 0.15,
strokeColor: '#000000',
strokeWeight: 1,
fillColor: 'steelblue',
fillOpacity: 0.8,
};
// Set the Path Stroke Color
var poly = new google.maps.Polyline({
map: gmap,
strokeColor: '#dd0000',
icons: [{
icon: iconSymbol
}]
});
// Draw the path for this vehicle
// We compute the path between each point to follow the road
for (var i = 0; i < pathPoints.length; i++) {
// If it's not the last point
if ((i + 1) < pathPoints.length) {
var src = pathPoints[i];
var des = pathPoints[i + 1];
// We had the starting point to the poly path
path.push(src);
// We compute the path between the 2 points
service.route({
origin: src,
destination: des,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
unitSystem: google.maps.UnitSystem.IMPERIAL
}, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
// We add the new computed points
for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) {
path.push(result.routes[0].overview_path[i]);
}
}
});
}
}
// Set the path of the polyline to draw it
poly.setPath(path);
}
UPDATE
I've fixed the issue of the path thanks to #anto
But I still have an issue time to time, the path is not drew on the road. I think it's an asynchronous issue with the service callback function but I'm not sure how I can fix it.
If I relaunch the script in jsfiddle it's working randomly, but sometime I end up with this kind of drawing:
UPDATE 2
It looks like using a recursive function is fixing most of it, except that my last point is not drawn: http://jsfiddle.net/maxwell2022/wY32u/11/

Answer 1

As click on google map first time its create start point as click second time on map it creates end point in map and displays route on map
> var map;
> var infowindow = new google.maps.InfoWindow();
> var wayA;
> var wayB;
> var geocoder = new google.maps.Geocoder();
> var directionsDisplay = new google.maps.DirectionsRenderer({
> suppressMarkers: true,
> panel: document.getElementById('right-panel'),
> draggable: true
> });
> var directionsService = new google.maps.DirectionsService();
> var data = {};
> initMap();
> function initMap() {
> debugger;
> map = new google.maps.Map(document.getElementById('rmap'), {
> center: new google.maps.LatLng(23.030357, 72.517845),
> zoom: 15
> });
> google.maps.event.addListener(map, "click", function (event) {
> if (!wayA) {
> wayA = new google.maps.Marker({
> position: event.latLng,
> map: map,
> icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
> });
> } else {
> if (!wayB) {
> debugger;
> wayB = new google.maps.Marker({
> position: event.latLng,
> map: map,
> icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
> });
> calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB);
> }
> }
> });
> }
> function computeTotalDistance(result) {
> var total = 0;
> var myroute = result.routes[0];
> for (var i = 0; i < myroute.legs.length; i++) {
> total += myroute.legs[i].distance.value;
> }
> total = total / 1000;
> return total;
> }
> function computeTotalDuration(result) {
> var total = 0;
> var myroute = result.routes[0].legs[0].duration.text;
> return myroute;
> }
> function calculateAndDisplayRoute(directionsService, directionsDisplay, wayA, wayB) {
> debugger;
> directionsDisplay.setMap(map);
> google.maps.event.addListener(directionsDisplay, 'directions_changed', function () {
> debugger;
> calculateAndDisplayRoute(directionsService, directionsDisplay.getDirections(), wayA, wayB);
> });
> directionsService.route({
> origin: wayA.getPosition(),
> destination: wayB.getPosition(),
> optimizeWaypoints: true,
> travelMode: 'DRIVING'
> }, function (response, status) {
> if (status === 'OK') {
> debugger;
>
> var route = response.routes[0];
> wayA.setMap(null);
> wayB.setMap(null);
> pinA = new google.maps.Marker({
> position: route.legs[0].start_location,
> map: map,
> icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=S|00FF00|000000"
> }),
> pinB = new google.maps.Marker({
> position: route.legs[0].end_location,
> map: map,
> icon: "https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=E|FF0000|000000"
> });
> google.maps.event.addListener(pinA, 'click', function () {
> infowindow.setContent("<b>Route Start Address = </b>" + route.legs[0].start_address + " <br/>" + route.legs[0].start_location);
> infowindow.open(map, this);
> });
> google.maps.event.addListener(pinB, 'click', function () {
> debugger;
> infowindow.setContent("<b>Route End Address = </b>" + route.legs[0].end_address + " <br/><b>Distance=</b> " +
> computeTotalDistance(directionsDisplay.getDirections()) + " Km
> <br/><b>Travel time=</b> " +
> computeTotalDuration(directionsDisplay.getDirections()) + " <br/> " +
> route.legs[0].end_location);
> infowindow.open(map, this);
> });
> } else {
> window.alert('Directions request failed due to ' + status);
> }
> directionsDisplay.setDirections(response);
> });
> }