嵌套在 div 标签中时，地图未显示在 Google Maps JavaScript API v3 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16349476/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
提问by
I'm trying to put the divtag that shows the map (<div id="map-canvas"></div>) inside another div, but it doesn't show the map that way. Is it a CSS or a JavaScript problem? Or is it just the way the API works?
我试图将div显示地图 ( <div id="map-canvas"></div>)的标签放在 another 中div，但它不会那样显示地图。它是 CSS 还是 JavaScript 问题？或者这只是 API 的工作方式？
Here's my code with the the nested div:
这是我的嵌套代码div：
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false">
</script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div> <!-- ommiting this div will show the map -->
<div id="map-canvas"></div>
</div>
</body>
</html>
采纳答案by NodeDad
Add style="width:100%; height:100%;"to the div see what that does
添加style="width:100%; height:100%;"到 div 看看它做了什么
not to the #map_canvasbut the main div
不是#map_canvas主 div
example
例子
<body>
<div style="height:100%; width:100%;">
<div id="map-canvas"></div>
</div>
</body>
There are some other answers on here the explain why this is necessary
这里还有其他一些答案解释了为什么这是必要的
回答by geocodezip
The problem is with percentage sizing. You are not defining the size of the parent div (the new one), so the browser can not report the size to the Google Maps API. Giving the wrapper div a specific size, or a percentage size if the size of its parent can be determined, will work.
问题在于百分比大小。您没有定义父 div（新的）的大小，因此浏览器无法向 Google Maps API 报告大小。如果可以确定其父级的大小，则为包装器 div 提供特定大小或百分比大小将起作用。
See this explanation from Mike Williams' Google Maps API v2 tutorial:
请参阅Mike Williams 的 Google Maps API v2 教程中的解释：
If you try to use style="width:100%;height:100%" on your map div, you get a map div that has zero height. That's because the div tries to be a percentage of the size of the
<body>, but by default the<body>has an indeterminate height.There are ways to determine the height of the screen and use that number of pixels as the height of the map div, but a simple alternative is to change the
<body>so that its height is 100% of the page. We can do this by applying style="height:100%" to both the<body>and the<html>. (We have to do it to both, otherwise the<body>tries to be 100% of the height of the document, and the default for that is an indeterminate height.)
如果您尝试在地图 div 上使用 style="width:100%;height:100%" ，则会得到一个高度为零的地图 div。那是因为 div 试图成为 大小的百分比
<body>，但默认情况下<body>具有不确定的高度。有多种方法可以确定屏幕的高度并将该像素数用作地图 div 的高度，但一个简单的替代方法是更改
<body>使其高度为页面的 100%。“：100％的高度”，以这两个我们可以通过应用样式=做到这一点<body>和<html>。（我们必须对两者都这样做，否则会<body>尝试成为文档高度的 100%，并且默认高度是不确定的。）
Add the 100% size to html and body in your css
将 100% 大小添加到 css 中的 html 和 body
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
Add it inline to any divs that don't have an id:
将其内联添加到任何没有 id 的 div：
<body>
<div style="height:100%; width: 100%;">
<div id="map-canvas"></div>
</div>
</body>
回答by ramazan polat
I solved this problem with:
我用以下方法解决了这个问题：
<div id="map" style="width: 100%; height: 100%; position: absolute;">
<div id="map-canvas"></div>
</div>
回答by Yergalem
FIXED
固定的
Give initial height of div and specify height in percentage in your style;
给出 div 的初始高度并在您的样式中以百分比指定高度；
#map {
height: 100%;
}
<div id="map" style="clear:both; height:200px;"></div>
回答by Josef.B
In my case I was getting the grey background and it turned out to be inclusion of a zoom value in the map options. Yup, makes no sense.
在我的情况下，我得到了灰色背景，结果是在地图选项中包含了缩放值。是的，没有意义。
回答by Nick Darley
Wizard
向导
Have you tried setting the height and width of the extra div, I know that on a project I am working on JS won't put anything in the div unless I have the height and width already set.
您是否尝试过设置额外 div 的高度和宽度，我知道在我正在处理的项目中，JS 不会在 div 中放置任何内容，除非我已经设置了高度和宽度。
I used your code and hard coded the height and width and it shows up for me and without it doesn't show.
我使用了你的代码并对高度和宽度进行了硬编码，它会显示给我，没有它就不会显示。
<body>
<div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map -->
<div id="map-canvas"></div>
</div>
</body>
I would recommend either hard coding it in or assigning the div an ID and then add it to your CSS file.
我建议要么硬编码它，要么为 div 分配一个 ID，然后将它添加到你的 CSS 文件中。
回答by wilaponce
I just want to add what worked for me, I added height and width to both divs and used bootstrap to make it responsive
我只想添加对我有用的东西，我为两个 div 添加了高度和宽度，并使用引导程序使其响应
<div class="col-lg-1 mapContainer">
<div id="map"></div>
</div>
#map{
height: 100%;
width:100%;
}
.mapContainer{
height:200px;
width:100%
}
in order for col-lg-1to work add bootstrap reference located
Here
为了col-lg-1工作添加位于此处的引导程序参考
回答by Sem
Understand this has been solved, but the solution provided above might not work in all situation.
明白这已经解决了，但上面提供的解决方案可能并不适用于所有情况。
For my case,
对于我的情况，
<div style="height: 490px; position:relative; overflow:hidden">
<div id="map-canvas"></div>
</div>
