谷歌地图全屏答案

【问题标题】：google maps fullscreen谷歌地图全屏
【发布时间】：2012-08-27 03:15:47
【问题描述】：

我试图让谷歌地图显示 100% 的宽度和高度。我搜索了几个示例，但无法使其正常工作。这里的页面

我在头部使用了这个 css

<style type="text/css">
html, body { height:100%; }
</style>

这在地图 div 内嵌

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

地图不显示

如果我这样做

<div id="map" style="width:500px; height:500px;">indenfor</div>

然后地图以 500x500 像素显示。

我做错了什么？

【问题讨论】：

【解决方案1】：

我使用了以下css：

#map_canvas {
    width:100%;
    height:100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

【讨论】：

【解决方案2】：

地图需要高度和宽度。

<style type="text/css">
html, body { height:100%; width:100%;}
</style>

【讨论】：

【解决方案3】：

尝试在地图样式div上使用min-height: 100%。

如果这不起作用，您还可以在 Javascript 中获取窗口的宽度和高度，然后在地图元素上动态设置样式以满足这些参数。

【讨论】：

【解决方案4】：

有一个额外的样式标签，删除它：

<style type="text/css" media="screen">
<style type="text/css">
html, body { height:100%; }
</style>

【讨论】：

【解决方案5】：

看来你用

解决了

#map { height : 100%; width : 100%; top : 0; left : 0; position : absolute; z-index : 200;}

之所以有效，是因为map 没有与position:relative 的父级，所以它相对于窗口定位。

但如果您希望map 相对于窗口定位，即使它有一个带有position:relative 的父窗口，您应该使用position:fixed 而不是position:absolute。

而且，你不必使用那么大的z-index。

【讨论】：

【解决方案6】：

在下面的示例中，将style="height: 100%;" 应用于body 和html 会使谷歌地图全高，因为地图加载到的div 是body 的子级。在您的情况下，您需要将style="height: 100%;" 添加到#map 的相关父元素中。