How to get a google map to use 100% of its parent container?

Question

I have tried to do this in many different ways but the most obvious was this:

var map2 = new GMap2(document.getElementById("map2"), {size:"100%"});

That does not work.

Solution

Google says:

Unless you specify a size explicitly for the map using GMapOptions in the constructor, the map implicitly uses the size of the container to size itself.

So set the size of your map container fill all available space:

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

Comments

[Alex]

You don't event need to add the width css property. Because "div" is naturally a block level element it will fill to it's parent's width :) Good answer though!

[Artilheiro]

I am doing that today using jQuery. It works for the most part but if the user resizes the window the map does not resize with it.

[Artilheiro]

Perfect! I was trying to use GSize which would not take a percentage.

[Elshan]

added position: relative; with above and works fine.