Google Maps div未顯示在JSBin中

-1

如果將寬度設置爲500px，當點擊我的「開始」按鈕時，可以顯示地圖畫布div。如果我將高度/寬度設置爲100％，則不會顯示。Google Maps div未顯示在JSBin中

我想確定我的項目會加載到移動設備上，所以我不想使用絕對尺寸。

http://jsbin.com/OpujukIF/1/edit?html,css,output

2013-12-13 spazzed

可能重複|顯示沒有地圖數據]（http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data） – geocodezip

CSS中有一個錯誤（85％後的逗號必須分號） –

使用可以使用絕對定位沒有width | height值，使用top|left|bottom|right與0組因爲它們的值，這將導致在#map-canvasdiv只要成爲包含元素#second的尺寸，因爲它被設置爲相對像這樣：

#second { 
    position: relative; 
} 

#map-canvas { 
    position: absolute; 
    top: 0; bottom: 0; 
    left: 0; right: 0; 
}

這裏是updated bin。

我希望這有助於！

來源

2013-12-13 17:29:42 dSquared

大多數官方[地圖演示]（https://developers.google.com/maps/documentation/javascript/examples/）都使用高度百分比值，並且它們的工作效果很好 –

@Dr。莫爾我只是快速瀏覽一下，但沒能找到一個能做的，你能參考一個嗎？ – dSquared

[第一個]（https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple）（幾乎所有人都有一個「查看全屏」，這樣做）。 – geocodezip

見Mike Williams explaination of percentage sizing from his Google Maps Javascript API v2 tutorial

html { 
    height:100%; 
    width: 100%; 
} 
body { 
    padding-top: 50px; 
    padding-bottom: 20px; 
    height: 100%; 
    width: 100%; 
} 

#map-canvas { 
    height: 85%; 
    width: 100%; 
}

[谷歌地圖API V3的

來源

2013-12-13 17:42:06 geocodezip

您的鏈接是合乎邏輯的，但是您的CSS仍然不會顯示地圖。 – spazzed

可能是Molle博士指出的CSS中的語法錯誤（以前是85％以後） – geocodezip

你的回答是正確的，但是它是「jumbotron」類拋棄了這些東西。設置這個有一個高度和寬度似乎已經解決了這個問題。謝謝！ – spazzed

Google Maps div未顯示在JSBin中

回答

相關問題