如何防止 Google 地圖在嵌入 100% 容器時消失？

調整Google 地圖容器尺寸以獲得最佳顯示

使用API​​ v3 在網頁中嵌入Google 地圖時，將容器DIV 的寬度和高度設定為100%可能會導致地圖消失。為了解決這個問題，必須了解正確的地圖渲染的要求。

主要問題是由於將寬度和高度設定為 100% 同時使用自動邊距的要求相互衝突。要實現頁面 100% 的覆蓋，將父容器的寬度和高度設為 100% 至關重要。這允許地圖容器繼承這些值並佔據所需的空間。

例如，您需要新增以下CSS 規則，以確保body、HTML 和#content 元素具有100%寬度和高度：

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

div#content {
  width: 100%;
  height: 100%;
}</code>

透過設定父容器的尺寸，您可以建立一個固定佈局，地圖容器可以繼承寬度和高度，從而正確顯示地圖。請記住為#content div 的寬度和高度設定一個絕對值，以避免根據子元素自動調整。

以上是如何防止 Google 地圖在嵌入 100% 容器時消失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！