JSBin에 Google지도 div가 표시되지 않습니다.

Question

너비를 500 픽셀로 설정하면 "시작하기"버튼을 클릭 할 때 나타나는지도 캔버스 div를 얻을 수 있습니다. 높이/너비를 100 %로 설정하면 나타나지 않습니다.

절대 크기를 사용하고 싶지 않기 때문에 내 프로젝트가 모바일 장치에서로드되는지 확인하고 싶습니다.

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

Answer 1

사용이 상대적으로 설정된만큼 포함 요소 #second의 크기가되는 #map-canvasdiv 초래 그들의 값으로 0 세트 top|left|bottom|right를 사용하여 width | height 값없이 절대 위치를 사용하여 좋아요 :

#second { 
    position: relative; 
} 

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

여기는 updated bin입니다.

도움이 되었기를 바랍니다.

Answer 2

는 참조 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%; 
}