当嵌套在div标签中时，地图未显示在Google Maps JavaScript API v3上
[英]Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag
问题描述
I'm trying to put the div tag that shows the map ( <div id="map-canvas"></div> ) inside another div , but it doesn't show the map that way. 
我正在尝试将显示地图的div标签（ <div id="map-canvas"></div> ）放置在另一个div ，但不会以这种方式显示地图。 Is it a CSS or a JavaScript problem? 是CSS还是JavaScript问题？ Or is it just the way the API works? 还是仅仅是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>
8 个解决方案
解决方案1
46 2013-05-02 23:50:33
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. 您没有定义父div的大小（新的div），因此浏览器无法将大小报告给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指定一个特定的大小，或者如果可以确定其父对象的大小，则给一个百分比大小将起作用。
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.
<body>, but by default the<body>has an indeterminate height.<body>大小的百分比，但默认情况下<body>的高度不确定。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.<body>使其高度为页面的100％。 We can do this by applying style="height:100%" to both the<body>and the<html>.<body>和<html>都应用style =“ height：100％”来实现。 (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.)<body>尝试达到文档高度的100％，并且默认值是不确定的高度。）
Add the 100% size to html and body in your css 将100％的大小添加到HTML和CSS中的正文中
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>
解决方案2
40 已采纳 2013-05-02 23:52:44
Add style="width:100%; height:100%;" 添加style="width:100%; height:100%;" to the div see what that does 到div看看有什么用
not to the #map_canvas but 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 这里还有其他答案，解释了为什么这样做是必要的
解决方案3
22 2013-09-24 14:09:55
I solved this problem with: 我用以下方法解决了这个问题：
<div id="map" style="width: 100%; height: 100%; position: absolute;">
<div id="map-canvas"></div>
</div>
解决方案4
11 2017-04-26 14:44:09
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>
解决方案5
9 2014-12-06 20:55:57
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. 是的，没有道理。
解决方案6
4 2013-05-02 23:51:17
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文件中。
解决方案7
4 2017-03-16 22:47:27
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-1 to work add bootstrap reference located Here 为了使col-lg-1工作，请在此处添加引导程序参考
解决方案8
0 2019-08-18 06:27:27
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.