Google Maps API Tutorial

© 2006, 2007, 2009 Mike Williams

 
Translate this page:

 

Using a percentage height for the map div

If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the <body>, but by default the <body> has an indeterminate height.

There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the <body> so that its height is 100% of the page. We can do this by applying style="height:100%" to both the <body> and the <html>. (We have to do it to both, otherwise the <body> tries to be 100% of the height of the document, and the default for that is an indeterminate height.)

The <body> also has a margin by default. If you want to switch that off, add "margin:0" to the <body> style, to push the body right out to the edge of the screen.

In this example I've set the map div height to 96% to leave room for the back link.

Back to Mike's Homepage
Up to the start of this tutorial