Le caselle grigie compaiono in alcune parti della Google Map incorporata nella casella modale

Question

Ho riscontrato un problema con l'incorporamento di una mappa di Google tramite l'API v3 in una casella modale.

Le caselle grigie vengono visualizzate nell'area della mappa quando viene visualizzata la modale. Il ridimensionamento della finestra del browser, la visualizzazione di Web Inspector e così via rendono visibili tutte le tessere della mappa, ovvero "forzano il rendering" della mappa.

L'elemento padre dell'elemento mappa (section#map-modal, vedere il codice di seguito) ha display: none impostato nel proprio CSS al caricamento della pagina. Il codice modale JS imposta automaticamente display: block quando si fa clic sul pulsante mostra. Se rimuovo temporaneamente display: none dall'elemento modale, la mappa viene visualizzata correttamente all'aggiornamento della pagina. La mappa di Google non piace avere un elemento genitore nascosto?

Sto utilizzando il plug-in mod di jQuery Bootstrap di Twitter e sto controllando la modal stessa con i CSS. È posizionato fisso, ha una larghezza di pixel, ecc. Niente di insolito.

ho ovviamente Googled intorno per soluzioni, e molti punti per il metodo API di Google di innescare l'evento resize:

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

ho davvero fatto così, ma senza alcun risultato.

codice rilevante: https://gist.github.com/1591488

Come si può vedere, I'me innescare gli eventi alla linea 39.

(premere il tasto mappaZoom sul fondo della barra laterale).

Files:

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

sarei profondamente apprezzare qualsiasi aiuto o altro paio di occhi in questo, come io sono presto impazzire per questo.

Answer 1

Per quanto mi infilò in un po 'su Chrome utilizzando JS modifica dal vivo, ritardando l'esecuzione di resize aspettare per l'animazione modale potrebbe funzionare :)

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

Answer 2

ho scoperto che avere display: none su l'elemento genitore della mappa (il modale) ha davvero incasinato le cose. L'ho cambiato in visibility: hidden solo per pura disperazione per vedere cosa sarebbe successo, e ha funzionato!

Ho anche modificato il codice JS modale per impostare il modale su visibility: visible/hidden quando la modal è mostrata/nascosta. Altrimenti si otterrebbe di nuovo display: none/block, che creerebbe nuovamente le caselle grigie.

Answer 3

Il problema è che se si fa qualcosa di simile:

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

è che il vostro modale probabilmente non era aperto (e visualizzata la dimensione giusta) quando viene attivato l'evento di ridimensionamento. Per risolvere questo problema:

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

lavorato per me almeno :)

Answer 4

La mia soluzione per bootstrap-modal.js V 2.0

sostituire classe "nascondere" per "invisibile" in modale div

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

funzione javascript

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

link HTML

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

Answer 5

provare a utilizzare il gestori di eventi modali. Penso che questo sia il modo più conciso (e corretta) per garantire che si sta ridimensionando dopo il modale è mostrato senza dover riscrivere alcun plugin:

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

UPDATE: Ho appena realizzato che questa soluzione continua a non centrare la mappa correttamente , quindi ho bisogno di aggiungere un comando di più:

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

Answer 6

ho avuto questo problema ed ho risolto facendo un richiamo al metodo draw. Penso che questo accada perché disegni la tua mappa in modo più eretto che mostrare la finestra di dialogo.

Ho usato questo codice per risolverlo (non è stato un finestra modale):

$('#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

Per coloro che utilizzano bootstrap, ho dovuto togliere "dissolvenza" della mia classe "modale"

da

<div class="modal fade" 

a

<div class="modal" ... 

Ho provato le soluzioni precedenti chiamando google.maps.event.trigger (map, 'resize'); ma ho calcolato che

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

non è mai stato chiamato. Questo problema sembrava indurmi a rimuovere la dissolvenza.
https://github.com/twbs/bootstrap/issues/11793

Questa non è una soluzione ottimale in quanto la dissolvenza è in realtà molto bello avere ...

Answer 9

mappa reso con successo senza ridimensionamento.

Perché ridimensionare ti offre una mappa corretta?

Perché il browser dipinge di nuovo la vista.

Come ripararlo?

Per ottenere un layout corretto della mappa in qualsiasi pannello attivato di recente, la mappa deve essere dipinta dopo il caricamento del pannello. Questo può essere ottenuto mediante il codice (setTimeout) come indicato di seguito. Lo scopo del codice è di attivare l'evento di ridimensionamento della mappa dopo 60 milli secondi.

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