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

Question

我正在尝试将显示地图的div标签（ <div id="map-canvas"></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>

Answer 1

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

请参阅Mike Williams的Google Maps API v2教程中的以下说明：

如果尝试在地图div上使用style =“ width：100％; height：100％”，则会得到高度为零的地图div。 这是因为div尝试占<body>大小的百分比，但默认情况下<body>的高度不确定。

有很多方法可以确定屏幕的高度并将像素数量用作地图div的高度，但是一种简单的替代方法是更改<body>使其高度为页面的100％。 我们可以通过对<body>和<html>都应用style =“ height：100％”来实现。 （我们必须对两者都进行此操作，否则<body>尝试达到文档高度的100％，并且默认值是不确定的高度。）

将100％的大小添加到HTML和CSS中的正文中

    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>

Answer 2

添加style="width:100%; height:100%;" 到div看看有什么用

不是#map_canvas而是主要div

例

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

这里还有其他答案，解释了为什么这样做是必要的

Answer 3

我用以下方法解决了这个问题：

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

Answer 4

固定

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

#map {
   height: 100%;
}

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

Answer 5

以我为例，我得到的是灰色背景，结果是在地图选项中包含了一个缩放值。 是的，没有道理。

Answer 6

巫师

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

Answer 7

我只是想添加对我有用的东西，我在两个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工作，请在此处添加引导程序参考

Answer 8

理解此问题已解决，但是上面提供的解决方案可能无法在所有情况下都有效。

就我而言

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

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

问题描述

8 个解决方案

解决方案1
46 2013-05-02 23:50:33

解决方案2
40 已采纳 2013-05-02 23:52:44

解决方案3
22 2013-09-24 14:09:55

解决方案4
11 2017-04-26 14:44:09

解决方案5
9 2014-12-06 20:55:57

解决方案6
4 2013-05-02 23:51:17

解决方案7
4 2017-03-16 22:47:27

解决方案8
0 2019-08-18 06:27:27

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

问题描述

8 个解决方案

解决方案1 46 2013-05-02 23:50:33

解决方案2 40 已采纳 2013-05-02 23:52:44

解决方案3 22 2013-09-24 14:09:55

解决方案4 11 2017-04-26 14:44:09

解决方案5 9 2014-12-06 20:55:57

解决方案6 4 2013-05-02 23:51:17

解决方案7 4 2017-03-16 22:47:27

解决方案8 0 2019-08-18 06:27:27

解决方案1
46 2013-05-02 23:50:33

解决方案2
40 已采纳 2013-05-02 23:52:44

解决方案3
22 2013-09-24 14:09:55

解决方案4
11 2017-04-26 14:44:09

解决方案5
9 2014-12-06 20:55:57

解决方案6
4 2013-05-02 23:51:17

解决方案7
4 2017-03-16 22:47:27

解决方案8
0 2019-08-18 06:27:27