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

HTML

 <div id="routeContainer">
   <table>
      <tr id="routeContainerTR">

      </tr>
   </table>    
 </div>

Jquery/Javascript

  <script type="text/javascript">
    var margin = 50;
    var maps = [];
      for (var i = 0; i < 5; i++) {
         $("#routeContainer").append("<td><div style='margin-left: " + margin + "px;' class = 'test'>hello world<div style='width:100%; height:100%; float:left;' id='map-canvas" + i + "'></div></div></td>");
            var mapOptions = {
                zoom: 10,
                scrollwheel: false

              };
              maps[i] = new google.maps.Map(document.getElementById('map-canvas'+i),mapOptions);
      };

  </script> 

If someone could tell me what Im doing wrong that would be awesome!

Answer 1

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