Q:

generating multiple google map on same page

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

A:

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>

