如何使用 JavaScript 動態調整 Google 地圖的大小？

使用JavaScript 動態調整Google 地圖大小

動態調整Google 地圖元素大小時，觸發調整大小事件以確保地圖大小至關重要調整為新尺寸。

適用於Google Maps v3

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

適用於Google Maps API

適用於谷歌地圖可以使用以下JavaScript 程式碼來觸發resize 事件：

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

然後您可以呼叫resizeMap() 將地圖調整為容器更新的尺寸。

補充說明：

• 調整大小事件必須在新尺寸設定後觸發。
• 使用視窗調整大小監聽器可以確保地圖回應瀏覽器視窗大小。

範例：

<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>

透過執行以下步驟，您可以確保您的Google 地圖能夠動態調整以適應其容器中的任何變化尺寸。

以上是如何使用 JavaScript 動態調整 Google 地圖的大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！