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

105

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?

Matthew James Taylor
quelle

Antworten:

28

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.

SingleNegationElimination
quelle
323

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

cmroanirgo
quelle
2
Denken Sie für alle, die goMap verwenden, daran, dass das Google Map-Objekt unter $ .goMap.map
Adam Caviness am
1
Sehen Sie diese Antwort von Andrew Hedges für eine Möglichkeit zu implementieren:
CrazyTim
Die Größe der Karte wurde nach dem Aufrufen nicht geändert, bis ich sie mit einem setTimeout umschlossen habe. Ich habe diese Lösung hier gefunden (siehe Kommentar Nr. 46).
Tyler Collier
Diese Antwort sollte unter Berücksichtigung der Tatsache ausgewählt werden, dass v2 jetzt veraltet ist. @ Tyler Collier Dieser Ereignisauslöser dient dazu, die Karte darüber zu informieren, dass sie sich neu streichen muss. Es ist möglich, dass Sie die Größe eines versteckten Containers ändern. In diesem Fall funktioniert ein Verkleinern und Verkleinern in einer Zeitüberschreitung.
Schien
8

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.

italiansoda
quelle
2

Wolfgang Pichlers Map-in-a-Box bietet an

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

Gilles 'SO - hör auf böse zu sein'
quelle
1
Es sieht so aus, als wäre dies für v2-Karten. Das Originalplakat fragte nach v3-Karten. Die beiden APIs scheinen nicht kompatibel zu sein.
JoshuaD
Dieser Link löst eine erkannte Bedrohung aus.
Intecho
1

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 );
Divyanshu Rawat
quelle
0

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}));
});
user1933951
quelle