Wie ändere ich die Größe einer Google Map mithilfe von JavaScript dynamisch?

Dynamische Größenänderung einer Google Map mit JavaScript

Bei der dynamischen Größenänderung eines Google Maps-Elements ist es wichtig, das Größenänderungsereignis auszulösen, um die Karte sicherzustellen passt sich den neuen Abmessungen an.

Für Google Maps v3

<code class="javascript">google.maps.event.trigger(map, "resize");</code>

Für Google Maps API

Für Google Maps API können Sie den folgenden JavaScript-Code verwenden, um das Größenänderungsereignis auszulösen:

<code class="javascript">function resizeMap() {
  google.maps.event.trigger(map, "resize");
}</code>

Sie können dann resizeMap() aufrufen, um die Karte an die aktualisierten Abmessungen des Containers anzupassen.

Zusätzliche Hinweise:

• Das Größenänderungsereignis muss ausgelöst werden, nachdem die neuen Abmessungen festgelegt wurden.
• Durch die Verwendung eines Fenstergrößen-Listeners kann sichergestellt werden, dass die Karte auf Änderungen in reagiert Browserfenstergröße.

Beispiel:

<code class="html"><script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map-container">
  <div id="map"></div>
</div>
<script>
  function resizeMap() {
    google.maps.event.trigger(map, "resize");
  }
  $(window).resize(resizeMap);

  var map = new google.maps.Map(document.getElementById("map"), {});
</script></code>

Durch Befolgen dieser Schritte können Sie sicherstellen, dass sich Ihre Google Map dynamisch an alle Änderungen in ihrem Container anpasst Größe.

Das obige ist der detaillierte Inhalt vonWie ändere ich die Größe einer Google Map mithilfe von JavaScript dynamisch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!