如何让谷歌地图使用 100% 的父容器？答案

【问题标题】：How to get a google map to use 100% of its parent container?如何让谷歌地图使用 100% 的父容器？
【发布时间】：2010-11-14 21:49:32
【问题描述】：

我尝试过很多不同的方法，但最明显的是：

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

那行不通。

【问题讨论】：

这应该会自动发生。可能还有其他干扰。你可以发布一些代码或链接吗？顺便说一句，你使用的“size”元素需要有一个 GSize，它是这样创建的： var size = new GSize(500,400);
这也是我的预期。下面的解决方案通过 div 本身的内联样式解决了我的问题。使用 GSize 不起作用，因为它不需要百分比。谢谢。

标签： javascript css api google-maps

【解决方案1】：

Google says:

除非您在构造函数中使用 GMapOptions 为地图显式指定大小，否则地图会隐式使用容器的大小来调整自身大小。

所以设置地图容器的大小填充所有可用空间：

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

【讨论】：

您不需要添加宽度 css 属性。因为“div”自然是块级元素，它会填充到它的父级宽度:) 很好的答案！
完美！我试图使用不占百分比的 GSize。
在上面添加了position: relative; 并且工作正常。

【解决方案2】：

如何动态计算其父容器的尺寸并在谷歌地图元素上明确设置它们？假设 100%/100% 的高度是行不通的。

【讨论】：

我今天使用 jQuery 来做这件事。它在大多数情况下都有效，但如果用户调整窗口大小，则地图不会随之调整大小。

【解决方案3】：

只指定宽度：100%； height: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/查看结果

/肖恩

【讨论】：

【解决方案4】：

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

【讨论】：