Set Google Maps Container DIV width and height 100%

Question

I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can\'t see the Map.

Here is HTML code snippe

Answer 1

Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.