嵌套在div标签中的地图不会显示在Google Maps JavaScript API v3上
我试图把显示地图（ <div id="map-canvas"></div> ）的div标签放在另一个div里面，但是它没有以这种方式显示地图。 这是一个CSS或JavaScript的问题？ 还是只是API的工作方式？
这是我的代码与嵌套的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>
添加style="width:100%; height:100%;" 到分区看看是什么
而不是#map_canvas但主要的div
例
<body> <div style="height:100%; width:100%;"> <div id="map-canvas"></div> </div> </body>
在这里还有一些其他的答案解释为什么这是必要的
问题是与百分比大小。 您没有定义父分区（新分区）的大小，因此浏览器无法将大小报告给Google Maps API。 给包装div一个特定的大小，或者一个百分比大小，如果它的父母的大小可以确定，将工作。
请参阅Mike Williams的Google Maps API v2教程的解释 ：
如果您尝试在地图div上使用style =“width：100％; height：100％”，则会得到零高度的地图div。 这是因为div试图成为
<body>大小的一个百分比，但是默认情况下<body>具有不确定的高度。有一些方法可以确定屏幕的高度，并使用该像素数作为地图div的高度，但是一个简单的select是更改
<body>，使其高度为页面的100％。 我们可以通过对<body>和<html>应用style =“height：100％”来做到这一点。 （我们必须这样做，否则<body>将会是文档高度的100％，而默认的高度是不确定的。）
在你的CSS添加100％的大小到HTML和正文
html, body, #map-canvas { margin: 0; padding: 0; height: 100%; width: 100%; }
将它内联添加到任何没有ID的div：
<body> <div style="height:100%; width: 100%;"> <div id="map-canvas"></div> </div> </body>
我解决了这个问题：
<div id="map" style="width: 100%; height: 100%; position: absolute;"> <div id="map-canvas"></div> </div>
在我的情况下，我得到了灰色的背景，结果是在地图选项中包含缩放值。 是的，没有任何意义。
固定
我不能告诉你这个小事情是如何花费我的时间来解决的。 给出div的初始高度，并在你的风格中指定百分比高度;
#map { height: 100%; } <div id="map" style="clear:both; height:200px;"></div>
巫师
你有没有尝试设置额外的div的高度和宽度，我知道在一个项目上工作的JS不会把任何东西在div中，除非我已经设置的高度和宽度。
我用你的代码和硬编码的高度和宽度，它显示了我，没有它不显示。
<body> <div style="height:500px; width:500px;"> <!-- ommiting the height and width will not show the map --> <div id="map-canvas"></div> </div> </body>
我会build议要么硬编码或分配一个ID的ID，然后将其添加到您的CSS文件。
我只是想添加什么为我工作，我增加了高度和宽度两个div和使用bootstrap使其响应
<div class="col-lg-1 mapContainer"> <div id="map"></div> </div> #map{ height: 100%; width:100%; } .mapContainer{ height:200px; width:100% }
为了让col-lg-1工作， 在这里添加bootstrap引用
