CODEWITHSUNDEEP
jqueryfor-loopgoogle-maps-api-3
Layne
Layne

Reputation: 672

Adding multiple Google maps to the same page using API v3

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.

Upvotes: 0

Views: 231

Answers (1)

Dr.Molle
Dr.Molle

Reputation: 117334

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

Upvotes: 1

Related Questions