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.
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.
Share Improve this question edited Jul 29, 2009 at 0:29 Joel Coehoorn 416k114 gold badges578 silver badges813 bronze badges asked Jul 29, 2009 at 0:14 ArtilheiroArtilheiro 4,00510 gold badges37 silver badges34 bronze badges 2- This should happen automatically. There is probably something else interfering. Can you post some code, or a link? By the way, the "size" element you're using there needs to be a GSize, which is created like this: var size = new GSize(500,400); – Chris B Commented Jul 29, 2009 at 14:33
- That is what I expected too. The solution bellow solved my problem by by an inline style on the div itself. Using GSize did not work because it would not take a percentage. Thank you. – Artilheiro Commented Jul 29, 2009 at 16:09
4 Answers
Reset to default 10Google 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>
How about dynamically calculating the dimensions of it's parent container and explicitly setting them on the google map element? Assuming 100%/100% height don't work out.
Just specifying width:100%; height:100% wasn't enough for me...
But I got it working by using the following BODY code:
<body onload="initialize()" style="margin:0px; padding:0px;">
And using the following map code:
<div id="map" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
See the result at http://arve.epfl.ch/test/
/shawn
<div class="some-pannel">
<div class="map-wrapper">
<div id="googleMap" style="width:100%;height:100%;"></div>
</div>
</div>
.some-pannel{
position: relative;
width: 123px;
height 321px;
}
.map-wrapper{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}