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?
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;}
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maps.googleapis.com/maps/api/js?v=3.exp&dummy=.js"></script>
Google Maps resize demo
<divid="map-canvas"></div>
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.
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.
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
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.
Dies war meine Antwort, die für mich funktioniert hat.
quelle
Wolfgang Pichlers Map-in-a-Box bietet an
quelle
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.
quelle
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
Und benötigen Sie den folgenden Code in JavaScript
quelle