it-swarm.com.de

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

Ich habe ein "mapwrap" -Div auf 400px x 400px gesetzt und innen habe ich eine Google-Map, die auf 100% x 100% eingestellt ist. Die Karte wird also mit 400 x 400px geladen. Mit JavaScript verkleinere ich die "Mapwrap" auf 100% x 100% des Bildschirms. Die Google-Karte ändert sich wie erwartet auf den gesamten Bildschirm, aber die Kacheln verschwinden vor dem rechten Rand des Bildschirms Seite.

Gibt es eine einfache Funktion, die ich anrufen kann, um die Google-Map an das größere 'mapwrap' div anzupassen? 

105

Wenn Sie Google Maps v2 verwenden, rufen Sie nach der Größenänderung des Containers checkResize() auf Ihrer Karte auf. Verknüpfung

UPDATE

Die Google Maps JavaScript API v2 wurde 2011 nicht mehr unterstützt. 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");

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


Update 

Diese Antwort ist schon lange her, daher lohnt sich vielleicht eine kleine Demo. Obwohl sie jQuery verwendet, ist dies nicht unbedingt erforderlich.

$(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 Google Maps JavaScript-API ist das Größenänderungsereignis nicht mehr Bestandteil der Map-Klasse.

Die Dokumentation heißt es 

Wenn die Größe der Karte geändert wird, ist der Kartenmittelpunkt 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 Auswirkungen

318
cmroanirgo

Die populäre Antwort google.maps.event.trigger(map, "resize"); hat für mich alleine nicht funktioniert. 

Hier war ein Trick, der sicherstellte, dass die Seite geladen wurde und dass auch die Karte geladen wurde. Durch Festlegen eines Listeners und Abhören des Ruhezustands der Karte können Sie den Ereignisauslöser zur Größenänderung aufrufen.

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

Dies war meine Antwort, die für mich funktionierte.

8
italiansoda

Wolfgang Pichlers map-in-a-box bietet an

Laden Sie eine Karte in ein ziehbares und anpassbares div-Element.

2
user177903

Dies ist am besten, wenn Sie die erledigte Aufgabe erledigen. Das Element muss nicht mehr überprüft werden, um die Größe der Karte zu ändern Was es bewirkt, wird automatisch ein erneutes Größenereignis ausgelöst.

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

Zunächst einmal vielen Dank, dass Sie mich geleitet und diese Ausgabe abgeschlossen haben. Ich habe einen Weg gefunden, dieses Problem in Ihren Diskussionen zu beheben. Ja, kommen wir zum Punkt ... Die Sache ist, ich benutze den GoogleMapHelper v3-Helfer in CakePHP3. Als ich versuchte, das modifizierte Popup-Fenster von Bootstrap zu öffnen, fiel mir die graue Box über die Karte. Es wurde um 2 Tage verlängert. Zum Schluss habe ich das Problem behoben.

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

Sie müssen das folgende Skript in der setCenterMap-Funktion hinzufügen

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

Und benötigen den folgenden Code in JavaScript

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