Múltiples instancias de Google Maps en una página

Question

Tengo un formulario que le permite obtener una vista previa de las coordenadas a través de un mapa de google. El usuario puede agregar dinámicamente conjuntos múltiples de coordenadas a la forma. La cantidad de coordenadas es variable.

Reviso las variables con este código que creo que tiene que ver con la carga de varias instancias de Google Maps. El primer mapa se carga bien, pero el segundo mapa solo carga una ficha en la esquina izquierda. SI actualizo las coordenadas en el formulario, todos los mapas solo muestran un mosaico en el extremo izquierdo.

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

¡Gracias por la ayuda! Aaron

Answer 1

Parece que tiene problemas para redimensionar el mapa. Por lo que recuerdo, esto sucede si cambia el tamaño del contenedor del mapa. ¿Puedes intentar disparar el tamaño después de mostrar el mapa?

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