為什麼我的 Google 地圖容器未以 100% 寬度和高度顯示？

如何將Google 地圖容器DIV 寬度和高度設定為100%

載入Google 地圖API v3 並嘗試在div 中顯示它時，您可能會遇到儘管將寬度和高度都設為100%，但地圖仍不可見的情況。您提供的 HTML 程式碼如下：

<code class="html"><!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;">...</div></code>

要解決此問題，確保 Google 地圖容器 div 的所有父容器的寬度設定為 100% 至關重要。此外，包含 Google 地圖容器的 #content div 必須將其寬度和高度明確設定為絕對值。

以下是解決此問題的更新的CSS 程式碼片段：

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

div#content {
  width: 100%; /* Set absolute width here */
  height: 100%; /* Set absolute height here */
}</code>

透過進行這些更改，您將能夠將Google 地圖容器DIV 的寬度和高度設定為100%，並使其按預期覆蓋整個頁面。

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