Google Maps API V3 (JS): Multiple directions on one map - google-maps

Question

I know this question has been answered before, but unfortunately, all links to demos/explanation pages are dead at the moment.
I would like to use the Google Maps API V3 to plot two directions (one for driving and one for walking) on the same map. If possible, I would like to use Google's default 'directions' lines, since these look nicer than the polylines.
Does anybody know how to do this? Any help is greatly appreciated!

Answer 1

Here is an example that I have made in the past for this. The trick is multiple DirectionsRenderer instances.
var MAP,
DIRECTIONSRENDERER1,
DIRECTIONSRENDERER2,
USER,
PLACE1,
PLACE2;
function displayDirections1(result, status) {
DIRECTIONSRENDERER1.setDirections(result)
}
function displayDirections2(result, status) {
DIRECTIONSRENDERER2.setDirections(result)
}
function getDirections(location, displayCallback) {
//https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsRequest
var request = {
travelMode: google.maps.TravelMode.DRIVING,
origin: USER,
destination: location
};
//https://developers.google.com/maps/documentation/javascript/3.exp/reference#DirectionsService
var service = new google.maps.DirectionsService();
service.route(request, displayCallback);
}
//Set up the map
function initialize() {
var mapOptions = {
zoom: 6,
//I used the center of the USA
center: new google.maps.LatLng(38.8282, -98.5795)
};
//Make the map
MAP = new google.maps.Map(document.getElementById('map'), mapOptions);
DIRECTIONSRENDERER1 = new google.maps.DirectionsRenderer({
map: MAP
})
DIRECTIONSRENDERER2 = new google.maps.DirectionsRenderer({
map: MAP
})
//Make marker for User location
//NOTE: for testing, the user position is fixed
USER = new google.maps.LatLng(38.8282, -98.5795);
new google.maps.Marker({
label: 'U',
cursor: "User Location",
position: USER,
map: MAP
});
//used for this demo
document.getElementById("latitude").textContent = USER.lat();
document.getElementById("longitude").textContent = USER.lng();
//Make marker for Place1 (location is arbitrary)
PLACE1 = new google.maps.LatLng(37, -97);
new google.maps.Marker({
label: '1',
cursor: "Place 1",
position: PLACE1,
map: MAP
});
//Make marker for Place2 (location is arbitrary)
PLACE2 = new google.maps.LatLng(39, -102);
new google.maps.Marker({
label: '2',
cursor: "Place 2",
position: PLACE2,
map: MAP
});
document.getElementById("p1button").addEventListener("click", function(e) {
getDirections(PLACE1, displayDirections1);
});
document.getElementById("p2button").addEventListener("click", function(e) {
getDirections(PLACE2, displayDirections2);
});
//Trigger map redraw when dom element is resized
google.maps.event.addDomListener(window, 'resize', function() {
google.maps.event.trigger(MAP, 'resize');
});
//Preserve map perspective when after resize
google.maps.event.addListener(MAP, 'resize', function() {
var center = MAP.getCenter();
google.maps.event.addListenerOnce(MAP, 'center_changed', function() {
MAP.setCenter(center);
});
});
}
//runs the code to set up demo
initialize();
html,
body,
#map {
height: 100%;
width: 100%;
border-width: 0;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<b>Your location:</b>
<br/>
<span>Latitude: </span><span id="latitude"></span>
<br/>
<span>Longitude: </span><span id="longitude"></span>
<br/>
<br/>
<button id="p1button">Directions to Place1</button>
<button id="p2button">Directions to Place2</button>
<div id="map"></div>