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

如何在載入後使用 JavaScript 調整 Google 地圖大小

使用 Google 地圖時，有時需要在載入後調整地圖大小。這可以透過 JavaScript 實現，但需要一些特定步驟來確保地圖圖塊相應調整。

要調整 v3 中的 Google 地圖大小，請依照下列步驟操作：

1. 調整大小父級
   或使用 JavaScript 或 CSS 儲存 Google 地圖的容器元素。
2. 在 Google 地圖物件上觸發「調整大小」事件。

觸發調整大小事件

在Google 地圖v3 中，需要明確觸發調整大小事件：

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

其中， map 是需要調整大小的Google 地圖物件。

範例使用jQuery

以下是使用jQuery 處理視窗大小調整並觸發Google 地圖大小調整的範例：

<code class="javascript">$(function() {
  var map = new google.maps.Map($("#map-canvas")[0], mapOptions);

  $(window).resize(function() {
    google.maps.event.trigger(map, "resize");
  });
});</code>

透過執行以下步驟，您可以有效地調整Google 地圖大小並確保地圖圖塊在新尺寸內調整併正確顯示。