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

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

C'è una semplice funzione che posso chiamare per far sì che la mappa di Google si adegui nuovamente al div 'mapwrap' di dimensioni maggiori?

Se stai utilizzando Google Maps v2, chiama checkResize()sulla mappa dopo aver ridimensionato il contenitore. collegamento

AGGIORNARE

L'API JavaScript di Google Maps v2 è stata ritirata nel 2011. Non è più disponibile.

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

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

Consulta la documentazione per l'evento resize (dovrai cercare la parola "resize"): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Aggiornare

Questa risposta è qui da molto tempo, quindi una piccola demo potrebbe essere utile e sebbene utilizzi jQuery, non è necessario 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>

AGGIORNAMENTO 22/05/2018

Con una nuova versione del renderer nella versione 3.32 dell'API JavaScript di Maps, l'evento di ridimensionamento non fa più parte della Mapclasse.

La documentazione afferma

Quando la mappa viene ridimensionata, il centro della mappa viene fissato

• Il controllo a schermo intero ora preserva il centro.

• Non è più necessario attivare manualmente l'evento di ridimensionamento.

fonte: https://developers.google.com/maps/documentation/javascript/new-renderer

google.maps.event.trigger(map, "resize"); non ha alcun effetto a partire dalla versione 3.32

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

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

$(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.

La mappa in scatola di Wolfgang Pichler offre a

Carica una mappa in un elemento div trascinabile e ridimensionabile.

Questo è meglio che farà il Lavoro fatto. Ridimensionerà la tua mappa. Non è più necessario ispezionare l'elemento per ridimensionare la mappa. Ciò che fa attiverà 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 );

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

Dobbiamo aggiornare GoogleMapHelper per risolvere il problema

È necessario aggiungere lo script seguente nella funzione setCenterMap

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

E è necessario includere il codice seguente in JavaScript

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