Adding multiple map canvases to window - Google Maps Javascript API v3

Question

I want to show multiple google map canvases in one window but it isnt working. The maps created in the for loop all just appear grey with nothing on them and I cant figure o

Answer 1

1. include the two mandatory options (zoom and center)
2. create the DOM elements dynamically to avoid waiting for them to be created,
3. give them a size.

working fiddle

var margin = 50;
var maps = [];
for (var i = 0; i < 5; i++) {
    var tableCell = document.createElement("td");
    tableCell.setAttribute("style", "height:100% width:100%");
    var newMapCont = document.createElement("div");
    newMapCont.setAttribute("style", "margin-left: " + margin + "px; height:100% width:100%");
    newMapCont.setAttribute("class", 'test');
    var newMap = document.createElement("div");
    newMap.setAttribute("id", "map-canvas" + i);
    newMap.setAttribute("style", "width:500px; height:500px; float:left;");
    newMapCont.appendChild(newMap);
    tableCell.appendChild(newMapCont);

    $("#routeContainerTR").append(tableCell);
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(i, i),
        scrollwheel: false

    };
    maps[i] = new google.maps.Map(newMap, mapOptions);
}

code snippet:

function initialize() {
  var margin = 50;
  var maps = [];
  for (var i = 0; i < 5; i++) {
    var tableCell = document.createElement("td");
    tableCell.setAttribute("style", "height:100% width:100%");
    var newMapCont = document.createElement("div");
    newMapCont.setAttribute("style", "margin-left: " + margin + "px; height:100% width:100%");
    newMapCont.setAttribute("class", 'test');
    var newMap = document.createElement("div");
    newMap.setAttribute("id", "map-canvas" + i);
    newMap.setAttribute("style", "width:500px; height:500px; float:left;");
    newMapCont.appendChild(newMap);
    tableCell.appendChild(newMapCont);

    $("#routeContainerTR").append(tableCell);
    var mapOptions = {
      zoom: 10,
      center: new google.maps.LatLng(i, i),
      scrollwheel: false

    };
    maps[i] = new google.maps.Map(newMap, mapOptions);
    createMarker(mapOptions.center, mapOptions.center.toUrlValue(6), maps[i]);
  }
}

function createMarker(latlng, title, map) {
  var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: title
  });
  var infowindow = new google.maps.InfoWindow();
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent(title);
    infowindow.open(map, marker);
  });
  google.maps.event.trigger(marker, 'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
  border: 2px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3&libraries=geometry"></script>
<div id="routeContainer" style="width:100%; height: 100%;">
  <table style="width:100%; height: 100%;">
    <tbody style="width:100%; height: 100%;">
      <tr id="routeContainerTR" style="width:100%; height: 100%;"></tr>
    </tbody>
  </table>
</div>

Answer 2

center attribute is required for creating maps using Google maps Javascript API, add center to your mapOptions and it will works fine.