嵌套在 div 标签中时，地图未在 Google Maps JavaScript API v3 上显示答案

【问题标题】：Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag嵌套在 div 标签中时，地图未在 Google Maps JavaScript API v3 上显示
【发布时间】：2013-04-27 07:12:15
【问题描述】：

我正在尝试将显示地图 (<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>

【问题讨论】：

标签： javascript google-maps-api-3

【解决方案1】：

问题在于百分比大小。您没有定义父 div（新 div）的大小，因此浏览器无法将大小报告给 Google Maps API。如果可以确定其父级的大小，则为包装器 div 指定特定大小或百分比大小。

见this explanation from Mike Williams' Google Maps API v2 tutorial:

如果您尝试在地图 div 上使用 style="width:100%;height:100%"，您会得到一个高度为零的地图 div。那是因为 div 试图成为<body> 大小的百分比，但默认情况下<body> 有一个不确定的高度。

有一些方法可以确定屏幕的高度，并使用该像素数作为地图 div 的高度，但一个简单的替代方法是更改 <body> 使其高度为页面的 100%。我们可以通过将 style="height:100%" 应用于<body> 和<html>。（我们必须对两者都这样做，否则 <body> 试图达到文档高度的 100%，默认是不确定的高度。）

将 100% 大小添加到 CSS 中的 html 和 body

    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>

【讨论】：

【解决方案2】：

向导

您是否尝试过设置额外 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>

我建议要么对其进行硬编码，要么为 div 分配一个 ID，然后将其添加到您的 CSS 文件中。

【讨论】：

【解决方案3】：

将style="width:100%; height:100%;" 添加到 div 看看会发生什么

不是#map_canvas，而是主div

例子

<body>
    <div style="height:100%; width:100%;">
         <div id="map-canvas"></div>
    </div>
</body>

这里还有一些其他的答案来解释为什么这是必要的

【讨论】：

是的，将尺寸分配给映射父容器修复了它，谢谢！

【解决方案4】：

我解决了这个问题：

    <div id="map" style="width: 100%; height: 100%; position: absolute;">
                 <div id="map-canvas"></div>
     </div>

【讨论】：

该死的，绝对解决这个问题，失去了两个小时的生命：D

【解决方案5】：

在我的情况下，我得到了灰色背景，结果证明是在地图选项中包含缩放值。是的，没有意义。

【讨论】：

【解决方案6】：

我只想添加对我有用的东西，我为两个 div 添加了高度和宽度，并使用引导程序使其响应

   <div class="col-lg-1 mapContainer">
       <div id="map"></div>
   </div>

   #map{
        height: 100%;
        width:100%;
   }
   .mapContainer{
        height:200px;
        width:100%
   }

为了让col-lg-1 工作，添加引导引用位于 Here

【讨论】：

【解决方案7】：

已修复

给出 div 的初始高度，并在样式中以百分比形式指定高度；

#map {
   height: 100%;
}

<div id="map" style="clear:both; height:200px;"></div>

【讨论】：

【解决方案8】：

了解这已解决，但上面提供的解决方案可能不适用于所有情况。

就我而言，

<div style="height: 490px; position:relative; overflow:hidden">
    <div id="map-canvas"></div>
</div>

【讨论】：