generating multiple google map on same page - google-maps

Question

I want to generate multiple google map on the same page each showing the route for different destinations.Here is my code :
var container = document.getElementById("container");
function initMap() {
for(var i=0;i<5;i++ ){
container.innerHTML += '<div class="mapSize" id="map' + i + '"></div>';
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(document.getElementById('map'+ i), {
zoom: 11,
center: {lat:-20.239340, lng:57.574604 }
});
directionsDisplay.setMap(map);
var start = 'Albion, Mauritius';
var end = 'Grand Port District, Mauritius';
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
}
The problem is that the map is displaying only in the last div and I am getting a warning in the "directionsDisplay.setDirections(response);" line : Mutable variable is accessible from closure. Please help me

Answer 1

You have several problems with the posted code. The main issue is the asynchronous nature of the DirectionsService. You need to assign a DirectionsService/DirectionsRenderer to each map. One way to do that is to put the code to create the map and directions in a function and use function closure.
function makeMap(mapEl, start, end) {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(mapEl, {
zoom: 11,
center: {
lat: -20.239340,
lng: 57.574604
}
});
directionsDisplay.setMap(map);
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
proof of concept fiddle
code snippet:
function initMap() {
var container = document.getElementById("container");
var maps = [];
var directionsDisplays = [];
var start = 'Albion, Mauritius';
var end = ['Grand Port District, Mauritius', "Port Lous, Mauritius", "Medine Camp de Masque, Mauritius", "Poste Lafayette, Mauritius", "Souillac, Mauritius"];
for (var i = 0; i < 5; i++) {
// container.innerHTML += '<div class="mapSize" id="map' + i + '"></div>';
var elem = document.createElement("div");
elem.setAttribute("class", "mapSize");
elem.setAttribute("id", "map" + i);
container.appendChild(elem);
makeMap(elem, start, end[i]);
}
}
google.maps.event.addDomListener(window, "load", initMap);
function makeMap(mapEl, start, end) {
var directionsDisplay = new google.maps.DirectionsRenderer;
var directionsService = new google.maps.DirectionsService;
var map = new google.maps.Map(mapEl, {
zoom: 11,
center: {
lat: -20.239340,
lng: 57.574604
}
});
directionsDisplay.setMap(map);
directionsService.route({
origin: start,
destination: end,
travelMode: 'DRIVING'
}, function(response, status) {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
html,
body,
#container {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
.mapSize {
height: 400px;
width: 400px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="container"></div>