【问题标题】：Set Google Maps Container DIV width and height 100%将 Google Maps Container DIV 宽度和高度设置为 100%
【发布时间】：2012-04-29 21:11:38
【问题描述】：

我加载了 Google Maps API v3 并在 div 中打印 Google Map。但是当将宽度和高度设置为 100% 和自动时，我看不到地图。

这里是 HTML 代码 sn-p。

<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>

有没有办法解决这个问题？

【问题讨论】：

div#gmap_canvas 包含的元素的样式是什么？
` #content{background-color:#fff;border:solid 1px #a6a196;border-radius:4px;-moz-border-radius:4px;height:auto;溢出：隐藏；}`

标签： css google-maps google-maps-api-3 css-position google-maps-api-2

【解决方案1】：

迟到总比不到好！我给我的课：

.map
{
    position:absolute;
    top:64px;
    width:1100px;
    height:735px;
    overflow:hidden;
    border:1px solid rgb(211,211,211);
    border-radius:3px;
}

然后

<div id="map" class="map"></div>

【讨论】：

【解决方案2】：

如果您不能影响您的父元素（例如在嵌套组件的情况下），您可以使用 height: 100vh 这将使其成为一个完整的窗口 (=view) 高度；

【讨论】：

如果您使用网格布局怎么办？

【解决方案3】：

这项工作适合我。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 

#cont{
    position: relative;
    width: 300px;
    height: 300px;
}
#map_canvas{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
</style> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
    console.log("Initializing...");
  var latlng = new google.maps.LatLng(LAT, LNG);
    var myOptions = {
      zoom: 10,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
}
</script>
</head>

<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>

【讨论】：

哇，这个问题确实有效。非常感谢！

【解决方案4】：

您可以将高度设置为-webkit-fill-available

<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>

【讨论】：

【解决方案5】：

这对我有用。

map_canvas {位置：绝对；顶部：0；右：0；底部：0；左：0;}

【讨论】：

【解决方案6】：

很少有人意识到 css 定位的威力。要将地图设置为占据其父容器的 100% 高度，请执行以下操作：

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

如果您在#map_canvas_container 中有任何非绝对定位的元素，它们将设置它的高度，并且地图将占用确切的可用空间。

【讨论】：

非常有趣的技术。我从事网络开发已经有一段时间了，并没有意识到这一点。
太糟糕了，拒绝这个问题的人从来没有费心说“为什么？” ... 非常适合我
技术很棒。以前没用过，效果很好。

【解决方案7】：

我刚刚添加了内联样式。
<div id="map_canvas" style="width:750px;height:484px;"></div>
它对我有用。

【讨论】：

【解决方案8】：

我费了很大劲才找到答案。

你真的不需要对体型做任何事情。您只需要从地图代码中删除内联样式即可：

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=new+york&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New+York,+United+States&amp;t=m&amp;z=10&amp;iwloc=A&amp;output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=new+york&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New+York,+United+States&amp;t=m&amp;z=10&amp;iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>

删除所有内联样式并添加类或 ID，然后按照您喜欢的方式设置样式。

【讨论】：

【解决方案9】：

将地图容器设置为相对位置就可以了。这是HTML。

<body>
    <!-- Map container -->
    <div id="map_canvas"></div>
</body>

还有简单的CSS。

<style>
html, body, #map_canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#map_canvas {
    position: relative;
}
</style>

在所有浏览器上测试。这是屏幕截图。

【讨论】：

【解决方案10】：

Gmap 将内联样式位置写入相对于 div 的位置。用：覆盖它：

google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});

希望对你有帮助。

【讨论】：

【解决方案11】：

如果你想用它覆盖整个页面，你必须将所有父容器设置为 100% 宽度。您至少必须为#content div 设置宽度和高度的绝对值。

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}

【讨论】：

如果我只希望地图出现在网站的一部分而不是 100% 怎么办？ @Machiel
@RainbowHat 只需在 CSS 中指定大小，从 div#content 更改宽度和高度。
明确地说，内容 div 中的每个父元素（在 OP 的代码中是#map-canvas，而不是#content）必须设置特定的宽度/高度，不管是相对的还是准确的。这样做，这个答案是正确的。

【解决方案12】：

如果 div 是您页面上唯一的内容，请设置：

body, html {
  height: 100%;
  width: 100%;
}

【讨论】：

stackoverflow.com/questions/13926371/…