當我將容器 Div 設定為 100% 寬度和高度時，為什麼我的 Google 地圖不顯示？

解決100% 尺寸的Google 地圖容器DIV 大小調整問題

將Google 地圖嵌入到網頁中時，可能很難實現完全佔據可用空間的容器DIV。當使用者嘗試將容器 DIV 的寬度和高度屬性設為 100% 時，就會出現此問題，導致地圖不可見。

原因：

顯示DIV 內的地圖，Google 地圖需要有限的空間。指定 100% 的尺寸指示 DIV 符合其父容器的尺寸。如果父容器本身沒有明確設定為佔據整個頁面，DIV 將會縮小到較小的尺寸，從而使地圖不可見。

解：

要解決這個問題，需要建立一個寬度皆為 100% 的父容器鏈。這可確保地圖的容器 DIV 有足夠的空間展開並完全顯示其內容。此外，為地圖容器 DIV 的高度屬性指派一個數值（例如 700px），以便為地圖提供最小高度。

範例程式碼：

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%;
  height: 100vh;
}

div#map_canvas {
  height: 700px;
  width: 100%;
}</code>

透過將 body、html 和 content DIV 設定為 100% 寬度和高度，您可以建立一個覆蓋整個頁面的容器。然後，map_canvas DIV 填滿內容 DIV，同時保持 700px 的高度。這種方法可確保地圖始終可見並佔據預期空間。

以上是當我將容器 Div 設定為 100% 寬度和高度時，為什麼我的 Google 地圖不顯示？的詳細內容。更多資訊請關注PHP中文網其他相關文章！