CODEWITHSUNDEEP
cssgoogle-maps
Tonny Jørgensen
Tonny Jørgensen

Reputation: 79

google maps fullscreen

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 ?

Upvotes: 4

Views: 20557

Answers (6)

Cardazio
Cardazio

Reputation: 101

I used the following css:

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

Upvotes: 10

Danger14
Danger14

Reputation: 760

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

Upvotes: 0

Oriol
Oriol

Reputation: 288080

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.

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

The map needs both a height and a width.

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

Upvotes: 4

Dr.Molle
Dr.Molle

Reputation: 117324

There is an extra style-tag, remove it:

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

Upvotes: 0

TMan
TMan

Reputation: 1905

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.

Upvotes: 0

Related Questions