Area grigia nelle mappe di Google

Question

Ho implementato le mappe di Google nella mia app (in modale), tuttavia come puoi vedere sulle immagini qui sotto c'è un'area grigia di cui ovviamente voglio sbarazzarmi. È possibile spostare la mappa in modo che l'area grigia scompaia, ma ciò non dovrebbe essere necessario.

Il fatto è che la mappa viene mostrata all'interno di una casella modale, che contiene un sacco di contenuti creati dinamicamente quando si fa clic sul pulsante per mostrare il modale. Sembra che il problema potrebbe essere che il contenuto mappa non è a pieno carico prima che il modal è caricato, ma non sono sicuro ...

html:

... 
    <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Test</h3> 
    </div> 
    <div id="modal-left" class="modal-body left"></div> 
    <div class="modal-body right"> 
     <div id="map"></div> 
    </div> 
    </div> 
    ... 

js:

function initializeMap(latitude, longitude) { 
     var place = new google.maps.LatLng (latitude, longitude); 

     var myOptions = { 
      zoom: 10, 
      center: place, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     } 

     var map = new google.maps.Map(document.getElementById("map"), myOptions); 

     var marker = new google.maps.Marker({ 
      position: place, 
      map: map, 
      title: "" 
     }); 
    }; 

    $('.modal-btn').click(function(){ 
     var producerId = $(this).attr('id'); 

     GetProducer(producerId, function(data) { // <--- data retrieved through ajax 
      initializeMap(data.latitude, data.longitude); 

      var titel = data.name; 

      var content = "<p><img class='modal-img' src='" + data.imgurl + "' /></p>" + 
         "<p>" + data.name + ", " + data.address + "<br/>" + 
         data.zipcode + " " + data.town + "</p>" + 
         "<p><a href='" + data.url + "' >" + data.url + "</a></p>"; 

      $('#myModalLabel').html(titel); 
      $('#modal-left').html(content); 
     }); 
    }); 

Immagine 1:

Immagine 2:

Answer 1

Il solito motivo per cui questo sta accadendo è che la dimensione della mappa è cambiato dopo la mappa è stata inizializzata. Se per qualche ragione di modificare la dimensione del div con id = "mappa" è necessario attivare l'evento "ridimensionare"

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

Si può solo cercare di attivare l'evento nella vostra console javascript e vedere se aiuta .

Si prega di notare che questa risposta è un'ipotesi poiché non c'è davvero nulla nella domanda con cui lavorare, quindi per favore fatemi sapere se non aiuta.

Answer 2

Ho cercato una soluzione per un po '. Ho avuto gli stessi identici problemi e non sono l'unico. La riga di codice qui sopra non era abbastanza, ma ho notato che il ridimensionamento manuale del mio browser stava risolvendo il problema. Se risolve anche il tuo, allora ecco come risolvo il mio:

1) Aggiungi questo alla fine della tua funzione inizializzando la tua mappa. Aggiungerà un listener ad esso e chiamerà la funzione quando viene caricata la mappa. In pratica simulerà un ridimensionamento.

google.maps.event.addListenerOnce(map, 'idle', function(){ 
    $(window).resize(); 
    map.setCenter(yourCoordinates); 
}); 

ho dovuto centrare nuovamente la mappa dopo ridimensionare

2) Creazione di un ascoltatore di ridimensionamento, chiamando la mappa di google ridimensionare evento come questo:

$(window).resize(function() { 
    if ($("#map_canvas").children().length > 0){  
     if (map) 
     google.maps.event.trigger(map, 'resize'); 
    }}); 

ho anche dovuto mettere mappa fuori dalla mia funzione di inizializzazione ... So che non è la soluzione migliore ma funziona per ora. Non preoccuparti della chiamata a ridimensiona().

Sembra che sia correlato al div nascosto contenente la mappa di google. Ho anche trovato una soluzione simile su this website jfyi. Buona fortuna!

Answer 3

questo ha funzionato per me:

var center = map.getCenter(); 
// . . . your code for changing the size of the map 
google.maps.event.trigger(map, "resize"); 
map.setCenter(center); 

preso dal link, che @Bruno menzionato

Answer 4

Put google.maps.event.trigger (mappa, "ridimensionare"); in una funzione setTimeout in modo che si attivi DOPO che l'evento viene attivato.