Multiple instances of Google Maps on one page

Question

I have a form that allows you to preview coordinates via a google map. The user can dynamically add multiple sets of coordinates to the form. The amount of coordinates are variable.

I loop through the variables with this code which I feel it has to do with loading multiple instances of google maps. The first map loads just fine, but the second map only loads one tile in the far left hand corner. IF I update the coordinates on the form, then all of the maps only show one tile in the far left hand corner.

                while (tempClone != cloneCount) {   
var lat_lng = new google.maps.LatLng(lat, lng);              

                options = {
                    zoom: 14,
                    center: lat_lng,
                    panControl: false,
                    zoomControl: false,
                    mapTypeId: google.maps.MapTypeId.TERRAIN
                };

                map[tempClone] = new google.maps.Map(document.getElementById("map"+tempClone), options);

                var infowindow = new google.maps.InfoWindow({
                    content: inputBL[tempClone][0][1] + 'Entrance'
                }); 

                marker[tempClone] = new google.maps.Marker({
                    position: lat_lng,
                    map: map[tempClone],
                    title: inputBL[tempClone][0][1]
                }); 
}

Thank you for any help! Aaron

Answer 1

It almost looks like you're having trouble getting the map to resize. From what I recall this happens if the map container size changes. Can you try triggering a resize after showing the map?

google.maps.event.trigger(map, "resize");