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

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 2

You can set height to -webkit-fill-available

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

Answer 3

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 4

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 5

If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;

Answer 6

This worked for me.

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