I have some problem with adding Google Maps to my project. When i get it into body tags it works. But when I have structure like this
<body onload="initialize()">
<div>
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
</body>
it doesn’t show anything. How I can solve this problem?
It is because
height: 100%;is always relative to the parent’s height. In your case, this is the nameless div, which has zero height, so#map_canvaswill be the 100% of that, which is still zero. So the Google Maps won’t show because the div has no visible height.If you specifiy 100% on the parent div, it will work again. I guess you already have
html, body { height: 100%; }if it works being simply in the body tag.jsFiddle Demo