Wie kann ich die Größe einer Google Map mit JavaScript nach dem Laden ändern?

Ich habe ein "Mapwrap" -Div auf 400px x 400px eingestellt und darin habe ich eine Google "Map" auf 100% x 100% eingestellt. Die Karte wird also mit 400 x 400 Pixel geladen. Mit JavaScript ändere ich die Größe des "Mapwraps" auf 100% x 100% des Bildschirms. Die Google-Karte wird wie erwartet auf den gesamten Bildschirm angepasst, aber die Kacheln verschwinden vor dem rechten Rand des Bildschirms Seite.

Gibt es eine einfache Funktion, die ich aufrufen kann, um die Google-Karte an das größere Div "mapwrap" anzupassen?

Wenn Sie Google Maps v2 verwenden, rufen Sie checkResize()Ihre Karte auf, nachdem Sie die Größe des Containers geändert haben. Verknüpfung

AKTUALISIEREN

Die Google Maps JavaScript API v2 war 2011 veraltet. Sie ist nicht mehr verfügbar.

Für Google Maps v3 müssen Sie das Größenänderungsereignis anders auslösen:

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

Weitere Informationen finden Sie in der Dokumentation zum Ereignis "Größe ändern" (Sie müssen nach dem Wort "Größe ändern" suchen): http://code.google.com/apis/maps/documentation/v3/reference.html#event

Aktualisieren

Diese Antwort ist schon lange hier, daher könnte sich eine kleine Demo lohnen und obwohl sie jQuery verwendet, besteht keine wirkliche Notwendigkeit, dies zu tun.

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

UPDATE 2018-05-22

Mit einer neuen Renderer-Version in Version 3.32 der Maps JavaScript API ist das Größenänderungsereignis nicht mehr Teil der MapKlasse.

In der Dokumentation heißt es

Wenn die Größe der Karte geändert wird, ist die Kartenmitte festgelegt

• Die Vollbildsteuerung behält jetzt die Mitte bei.

• Das Größenänderungsereignis muss nicht mehr manuell ausgelöst werden.

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

google.maps.event.trigger(map, "resize"); hat ab Version 3.32 keine Auswirkung mehr

Die beliebte Antwort google.maps.event.trigger(map, "resize");hat bei mir allein nicht funktioniert.

Hier war ein Trick, der sicherstellte, dass die Seite geladen wurde und dass auch die Karte geladen wurde. Indem Sie einen Listener festlegen und auf den Ruhezustand der Karte warten, können Sie den Ereignisauslöser aufrufen, um die Größe zu ändern.

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

Dies war meine Antwort, die für mich funktioniert hat.

Wolfgang Pichlers Map-in-a-Box bietet an

Laden Sie eine Karte in ein ziehbares und in der Größe veränderbares div-Element.

Dies ist am besten, wenn es die Arbeit erledigt. Die Größe Ihrer Karte wird geändert. Sie müssen das Element nicht mehr überprüfen, um die Größe Ihrer Karte zu ändern. Was es tut, löst automatisch ein Größenänderungsereignis aus.

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

Zunächst einmal vielen Dank, dass Sie mich angeleitet und diese Ausgabe abgeschlossen haben. Ich habe in Ihren Diskussionen einen Weg gefunden, dieses Problem zu beheben. Ja, kommen wir zum Punkt. Die Sache ist, dass ich den GoogleMapHelper v3-Helfer in CakePHP3 verwende. Als ich versuchte, das modale Bootstrap-Popup zu öffnen, stieß ich auf das Problem mit der grauen Box über der Karte. Es wurde um 2 Tage verlängert. Endlich habe ich eine Lösung dafür gefunden.

Wir müssen den GoogleMapHelper aktualisieren, um das Problem zu beheben

Das folgende Skript muss in der Funktion setCenterMap hinzugefügt werden

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

Und benötigen Sie den folgenden Code in JavaScript

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