I am trying to display multiple routes on same map but am unable to do so.
No matter what I do I get only one route.
function calcRoute() {
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Any pointers will be helpful.
I had the same problem. This thread on a Google group for Google maps shows how to do it.
The author (a Google employee), wrote this:
You should be able to create two DirectionsRenderer objects, each that use the same map and different DirectionsResults.
var map = new google.maps.Map(document.getElementById("map_canvas")); function renderDirections(result) { var directionsRenderer = new google.maps.DirectionsRenderer; directionsRenderer.setMap(map); directionsRenderer.setDirections(result); } var directionsService = new google.maps.DirectionsService; function requestDirections(start, end) { directionsService.route({ origin: start, destination: end, travelMode: google.maps.DirectionsTravelMode.DRIVING }, function(result) { renderDirections(result); }); } requestDirections('Huntsville, AL', 'Boston, MA'); requestDirections('Bakersfield, CA', 'Vancouver, BC');
I tried it and it does work.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With