Adding multiple Google maps to the same page using API v3

Question

I am trying to dynamically create a list of maps using a for loop. I've seen other examples but in mine, the for loop will also need to create the div for the map to live in as well as put the map in it.

My html...

<div id="allMaps"></div>

My simplified script...

var mapList = "";
for (i = 0; i < 10; i++) {
    mapList += '<div class="singleMap" id="map' + i + '"></div>';
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };
    var map = new google.maps.Map($("#map"+i), mapOptions);
}
$("#allMaps").append(mapList);

A fiddle: http://jsfiddle.net/QCjSW/2/

Thanks.

Answer 1

append() (insert the elements into the document) before you create the maps: http://jsfiddle.net/QCjSW/4/