Aparecen cuadros grises en partes de Google Map incrustado en el cuadro modal

Question

Tengo un problema al insertar un Google Map a través de la API v3 en un cuadro modal.

Aparecen cuadros grises en el lienzo del mapa cuando se muestra el modal. Al cambiar el tamaño de la ventana del navegador, abrir Web Inspector, etc., se pueden ver todos los mosaicos del mapa, es decir, se "fuerza a volver a renderizar" el mapa.

El elemento principal del elemento del mapa (section#map-modal, ver el código a continuación) tiene display: none establecido en su CSS en la carga de la página. El código modal JS establece automáticamente display: block cuando se hace clic en el botón mostrar. Si elimino temporalmente display: none del elemento modal, el mapa se representa correctamente al actualizar la página. ¿No le gusta a Google Map tener un elemento padre oculto?

Estoy usando el complemento jQuery modal de Bootstrap de Twitter, y estoy controlando el modal en sí con CSS. Está fijo, tiene un ancho de píxel, etc. Nada inusual.

He buscado en Google, por supuesto, en torno a las soluciones, y muchos puntos con el método API de Google de desencadenar el evento resize:

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

que he hecho hecho, pero fue en vano.

código relevante: https://gist.github.com/1591488

Como se puede ver, I'me activar los sucesos en la línea 39.

(pulse el botón Ver mapa más grande en la parte inferior de la barra lateral).

Archivos:

• fagerhult.js
• fagerhult.map.js
• bootstrap-modal.js
• master.css

Me profundamente agradecería cualquier ayuda o un par de ojos extra en esto, ya que estoy pronto volviéndose loco por eso.

Answer 1

Por lo que atizó un poco en Chrome utilizando JS edición en vivo, lo que retrasa la ejecución de resize que esperar a que la animación modal podría funcionar :)

https://gist.github.com/1592330#L107

Answer 2

descubrí que tener en display: none el elemento padre del mapa (el modal) realmente estropeó las cosas. Lo cambié a visibility: hidden solo en pura desesperación por ver qué pasaría, ¡y funcionó!

También modifiqué el código JS modal para establecer el modal en visibility: visible/hidden cuando se muestra/oculta el modal. De lo contrario, se volvería a establecer display: none/block, lo que crearía los cuadros grises de nuevo.

Answer 3

El problema es que si haces algo como esto:

$("#mapModalLink").click(function(){ 
    google.maps.event.trigger(map,"resize"); 
}); 

es que su modal probablemente no estaba abierto (y se muestra en el tamaño de la derecha) cuando se activa el evento de cambio de tamaño. Para solucionar esto:

$("#mapModalLink").click(function(){ 
    $("#mapModal").show(); 
    google.maps.event.trigger(map, 'resize'); 
}); 

trabajado para mí al menos :)

Answer 4

Mi solución para arranque-V 2.0 modal.js

sustituir a la clase "ocultar" para "invisible" en modal div

<div id="map_modal" class="modal fade invisible"> 
... 
</div> 

función de JavaScript

function open_map() 
{ 
    $('#map_modal').removeClass("invisible"); 
    $('#map_modal').modal('toggle'); 
} 

enlace HTML

<a href="javascript:open_map()">Open map</a> 

Answer 5

intenta usar los controladores de eventos modales. Creo que esta es la manera más concisa (y correcta) para asegurarse de que cambie el tamaño después de que se muestra el modal sin volver a escribir ningún tipo de plugins:

$('#map-modal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
}) 

ACTUALIZACIÓN: Me acabo de dar cuenta que esta solución todavía no se centra bien el mapa , así que necesitaba agregar un comando más:

$('#map-modal').on('shown', function() { 
    google.maps.event.trigger(map, 'resize'); 
    map.setCenter(new google.maps.LatLng(42.3605336, -72.6362989)); 
}) 

Answer 6

Tuve este problema y lo resolví haciendo una devolución de llamada al método de dibujo. Creo que esto sucede porque dibujas tu mapa antes que mostrar el diálogo.

que utiliza este código para resolverlo (no era una ventana modal):

$('#map').show(function() 
{ 
    var punto = new google.maps.LatLng(this.latitud, this.longitud); 
    var myOptions = {zoom: 15, center: punto, mapTypeId: google.maps.MapTypeId.ROADMAP,mapTypeControl:false, draggable:false}; 
    var map = new google.maps.Map(document.getElementById('mapa'), myOptions); 
    var marker = new google.maps.Marker({ 
    position:punto, 
    map: map, 
    title: this.nombre 
}); 
}); 

Answer 7

google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
    google.maps.event.addListenerOnce(map, 'tilesloaded', function() { 
      google.maps.event.trigger(map, 'resize'); 

    }); 
}); 

Answer 8

Para aquellos que utilizan arranque, tuve que quitar "desvanecimiento" de mi clase "modal"

de

<div class="modal fade" 

a

<div class="modal" ... 

He intentado con las soluciones anteriores llamando a google.maps.event.trigger (map, 'resize'); pero se imaginó que

.on("shown.bs.modal" ... 

nunca recibían llamadas. Este problema pareció apuntarme a eliminar el desvanecimiento.
https://github.com/twbs/bootstrap/issues/11793

Esto no es una solución óptima desde el fundido es realmente muy bueno tener ...

Answer 9

mapa rendido con éxito sin cambio de tamaño.

¿Por qué cambiar el tamaño le da el mapa correcto?

Porque el navegador pinta la vista de nuevo.

¿Cómo corregirlo?

Para obtener un diseño apropiado del mapa en cualquier panel que se active últimamente, el mapa debe pintarse después de que se cargue el panel. Esto se puede lograr mediante el código (setTimeout) como se menciona a continuación. El objetivo del código es activar el evento de cambio de tamaño del mapa después de 60 milisegundos.

setTimeout(function() { 
     uiGmapIsReady.promise().then(function (maps) { 
      google.maps.event.trigger(maps[0].map, 'resize'); 
      lat = -37; 
      lon = 144; 
      maps[0].map.panTo(new google.maps.LatLng(lat,lon)); 
      var marker = { 
       id: Date.now(), 
       coords: { 
        latitude: lat, 
        longitude: lon 
       } 
      }; 
      $scope.map.markers = []; 
      $scope.map.markers.push(marker); 
      console.log($scope.map.markers); 
     }); 
    }, 60);