Adding Multiple Map Canvases To Window - Google Maps Javascript Api V3

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 out why.

Solution 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:

functioninitialize() {
  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]);
  }
}

functioncreateMarker(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;
}

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

Solution 2:

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