Größe einer Google-Karte mit JavaScript ändern

Sie sind auf ein Problem gestoßen, bei dem Google-Kacheln verschwinden, nachdem die Größe eines „mapwrap“-Divs geändert wurde, das ein Google enthält Karte. Dieser Artikel soll eine Lösung für dieses Problem bieten, indem er die geeignete Funktion zum Auslösen einer Google-Kartenanpassung bespricht.

Warum verschwinden Kacheln?

Wenn Sie die Größe des „ mapwrap" div, die Google-Karte passt sich nicht automatisch an die neue Größe an. Dies führt zu einer Diskrepanz zwischen den Kartenabmessungen und dem Anzeigebereich, was dazu führt, dass Kacheln verschwinden.

Lösung

Um dies zu beheben, müssen Sie das Größenänderungsereignis explizit auslösen auf dem Google Map-Objekt. Dadurch wird die Karte angewiesen, ihr Layout neu zu berechnen und sich an die neuen Abmessungen des „mapwrap“-Divs anzupassen.

Für Google Maps v3 verwenden Sie diese Funktion:

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

Demonstration

Um dieses Konzept zu verdeutlichen, finden Sie hier eine Demonstration mit jQuery:

$(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 and trigger Google Maps to resize
  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});

Dieses Beispiel stellt sicher, dass sich die Google-Karte im Div „map-canvas“ bei jeder Größenänderung des Fensters automatisch an die neue Größe anpasst und verhindert, dass Kacheln verschwinden.