Come ridimensionare una mappa di Google con JavaScript dopo che è stata caricata?

Question

Ho un div "mapwrap" impostato su 400px x 400px e all'interno del quale ho una "mappa" di Google impostata su 100% x 100%. Quindi la mappa viene caricata a 400 x 400 pixel, quindi con JavaScript ridimensiono il "mapwrap" al 100% x 100% dello schermo - la mappa di google si ridimensiona a tutto schermo come mi aspettavo, ma le tessere iniziano a scomparire prima del bordo destro del pagina.

Esiste una semplice funzione che posso chiamare per fare in modo che la mappa di Google si aggiusti nuovamente al div più grande "mapwrap"?

Answer 1

Se si utilizza Google Maps v2, chiamare checkResize() sulla mappa dopo aver ridimensionato il contenitore. link

Answer 2

di Wolfgang Pichler map-in-a-box offerte per

caricare una mappa in un elemento div trascinabile e ridimensionabile.

Answer 3

per Google Maps v3, è necessario attivare l'evento di ridimensionamento in modo diverso:

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

vedere la documentazione per l'evento resize (avrete bisogno di cercare la parola 'ridimensionamento'): http://code.google.com/apis/maps/documentation/v3/reference.html#event

---

Aggiornamento

Questa risposta ha ape n qui da molto tempo, quindi una piccola demo potrebbe essere utile & anche se usa jQuery, non c'è bisogno di farlo.

$(function() { 
 
    var mapOptions = { 
 
    zoom: 8, 
 
    center: new google.maps.LatLng(-34.397, 150.644) 
 
    }; 
 
    var map = new google.maps.Map($("#map-canvas")[0], mapOptions); 
 

 
    // listen for the window resize event & trigger Google Maps to update too 
 
    $(window).resize(function() { 
 
    // (the 'map' here is the result of the created 'var map = ...' above) 
 
    google.maps.event.trigger(map, "resize"); 
 
    }); 
 
});

html, 
 
body { 
 
    height: 100%; 
 
} 
 
#map-canvas { 
 
    min-width: 200px; 
 
    width: 50%; 
 
    min-height: 200px; 
 
    height: 80%; 
 
    border: 1px solid blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script> 
 
Google Maps resize demo 
 
<div id="map-canvas"></div>

Answer 4

La risposta popolare google.maps.event.trigger(map, "resize"); non ha funzionato per me solo.

Ecco un trucco che assicurava che la pagina era stata caricata e che anche la mappa era stata caricata. Impostando un listener e ascoltando lo stato di inattività della mappa, è possibile chiamare il trigger dell'evento per ridimensionarlo.

$(document).ready(function() { 
    google.maps.event.addListener(map, "idle", function(){ 
     google.maps.event.trigger(map, 'resize'); 
    }); 
}); 

Questa è stata la mia risposta che ha funzionato per me.

Answer 5

Questo è il modo migliore per fare il lavoro. Ridimensionerà la tua mappa. Non è più necessario ispezionare l'elemento per ridimensionare la mappa. In base a quale azione verrà attivato automaticamente l'evento di ridimensionamento.

google.maps.event.addListener(map, "idle", function() 
     { 
      google.maps.event.trigger(map, 'resize'); 
     }); 

     map_array[Next].setZoom(map.getZoom() - 1); 
    map_array[Next].setZoom(map.getZoom() + 1); 

Answer 6

Prima di tutto, grazie per avermi guidato e chiudere la questione. Ho trovato un modo per risolvere questo problema dalle tue discussioni. Sì, veniamo al punto. Il fatto è che sto usando l'helper di GoogleMapHelper v3 in CakePHP3. Quando ho provato ad aprire il popup modale di bootstrap, sono stato colpito dal problema della scatola grigia sulla mappa. È stato esteso per 2 giorni. Finalmente ho una soluzione per questo.

abbiamo bisogno di aggiornare il GoogleMapHelper per risolvere il problema

necessario aggiungere il seguente script in funzione setCenterMap

google.maps.event.trigger({$id}, \"resize\"); 

e hanno bisogno l'inclusione sottostante Codice in JavaScript

google.maps.event.addListenerOnce({$id}, 'idle', function(){ 
    setCenterMap(new google.maps.LatLng({$this->defaultLatitude}, 
    {$this->defaultLongitude})); 
});