Can anyone help me figure out why my code for drawing a path between multiple points on a map isn't working? I've tried the code below, but it doesn't draw any paths. What could be causing this issue and how can I solve it?
var myTrip = [], waypts=[];
myTrip.push(new google.maps.LatLng(32.6384014, 51.65132887000004));
waypts.push({
location: new google.maps.LatLng(32.6384014, 51.65132887000004),
stopover: true
});
myTrip.push(new google.maps.LatLng(32.63727025, 51.65345639999998));
waypts.push({
location: new google.maps.LatLng(32.63727025, 51.65345639999998),
stopover: true
});
myTrip.push(new google.maps.LatLng(32.6367726, 51.65345639999998));
waypts.push({
location: new google.maps.LatLng(32.6367726, 51.65677270000003),
stopover: true
});
var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer(
{
suppressMarkers: true,
suppressInfoWindows: true
});
directionsDisplay.setMap(map);
var request = {
origin: myTrip[0],
destination: myTrip[myTrip.length - 1],
waypoints: waypts,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
If you want to check out my code in action, here is the link to my jsfiddle: jsfiddle geomap