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 snippet.

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

Is there a way to fix this issue?

Answer 1

Gmap writes inline style position to relative to the div. Overwrite that with :

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});

Hope it helps.

Answer 2

Better late than never! I made mine a class:

.map
{
    position:absolute;
    top:64px;
    width:1100px;
    height:735px;
    overflow:hidden;
    border:1px solid rgb(211,211,211);
    border-radius:3px;
}

and then

<div id="map" class="map"></div>

Answer 3

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.

Answer 4

This worked for me.

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

Answer 5

I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .

Answer 6

You can set height to -webkit-fill-available

<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>