All geek questions in one place

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

I tried to do it differently, but the most obvious was the following:

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

This does not work.

+3
source share
4 answers

Google says :

If you do not explicitly specify a size for the map using GMapOptions in the constructor, the map implicitly uses the size of the container for the size itself.

Thus, the size of your map container fills all the free space:

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

How about dynamically calculating the dimensions of its parent container and explicitly defining them in the google map element? Suppose a height of 100% / 100% does not work.

0

: 100%; : 100% ...

, BODY:

<body onload="initialize()" style="margin:0px; padding:0px;">

:

<div id="map" style="width: 100%; height: 100%; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>

http://arve.epfl.ch/test/

/Shawn

0
<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%;
}
0
source

Source: https://habr.com/ru/post/1713804/

More articles:


All Articles