google maps fullscreen

Question

Im trying to get google maps to show 100% width and height. I have search several examples but cannot get it to work. The page it here

http://o-meter.dk/geo2.html

I used this css in the head

<style type="text/css">
html, body { height:100%; }
</style>

and this in the map div inline

<div id="map" style="width:100%; height:100%;">indenfor</div>

The map dosnt show

If i do this instead

<div id="map" style="width:500px; height:500px;">indenfor</div>

then the maps shows in 500x500 pixels.

what am i doing wrong ?

Answer 1

I used the following css:

#map_canvas {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

Answer 2

The map needs both a height and a width.

<style type="text/css">
html, body { height:100%; width:100%;}
</style>

Answer 3

Try using min-height: 100% on the style of the map div.

http://www.tutwow.com/htmlcss/quick-tip-css-100-height/

If that doesn't work, you could also get the width and height of the window in Javascript and then set the style on the map element dynamically to meet those parameters.

Answer 4

There is an extra style-tag, remove it:

<style type="text/css" media="screen">
<style type="text/css">
html, body { height:100%; }
</style> 

Answer 5

It seems you solved it with

#map { height : 100%; width : 100%; top : 0; left : 0; position : absolute; z-index : 200;}

It works because map has no parent with position:relative, so the it's relatively positioned to the window.

But if you want map to be relatively positioned to the window even if it has a parent with position:relative, you should use position:fixed instead of position:absolute.

Moreover, you don't have to use so huge z-index.

Answer 6

In the below example, applying style="height: 100%;" to the body and html makes google maps full height because the div the map loads in to is a child of body. In your case, you need to add style="height: 100%;" to the relevant parent elements of #map.

Related:

http://econym.org.uk/gmap/basic19.htm

Google maps API Basic Example