Displaying multiple routes on a google map - google-maps

Question

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.

Answer 1

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.

Answer 2

Did you try as follows?
Here I have captured one path and displayed it. You can do the same by writing pointsArray = result.routes[1].overview_path; besides it and display it in a new loop.
directionsService.route (request, function (result, status)
{
if (status == google.maps.DirectionsStatus.OK)
{
directionsDisplay.setDirections (result);
pointsArray = result.routes[0].overview_path;
var i = 0;
var j = 0;
for (j = 0; j < pointsArray.length; j++)
{
var point1 = new google.maps.Marker ({
position:pointsArray [j],
draggable:false,
map:map,
flat:true
});
}
}
});