Google Maps javascript api v3 不显示地图答案

【问题标题】：Google Maps javascript api v3 does not show mapGoogle Maps javascript api v3 不显示地图
【发布时间】：2015-10-21 17:54:44
【问题描述】：

我今天来这里是因为我在使用 Google Maps javascript api 版本 3 时遇到问题。我的问题是 Google 地图没有出现。但是您如何在此屏幕上看到，代码中有地图：

我已将我的代码插入 jsfiddle (http://jsfiddle.net/05ktc2a6/) 但不起作用。我刚刚尝试使用宽度和高度为 100% 的 div 但不起作用。

如果你喜欢我把代码：

<body>

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

function initMap() {

    map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: 44.769503083884,
            lng: 10.431460571289
        },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15,
        disableDefaultUI: true
    });
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKKcVR26NAZ7j0zUtTY3Stu-DmcUhMW1E&callback=initMap"></script>
</body>

谁能帮帮我？几个星期前它还在工作，我不知道是什么:(

【问题讨论】：

标签： javascript api google-maps google-maps-api-3

【解决方案1】：

当你在一个元素上使用 100% 高度，但文档和文档正文没有指定高度时，浏览器无法计算高度...

您可以使用较新的 vh 度量而不是百分比来解决此问题，或者将 html, body 的高度设置为 100%。

#map {
    width: 100%;
    height: 100vh;
    border: 1px solid Aqua;
}

查看example on JSFiddle。

【讨论】：

【解决方案2】：

不确定这是否与我在 10 月 11 日更新后遇到的问题相同，但我的地图也没有显示。

我必须解决两件事： < meta http-equiv="X-UA-Compatible" content="IE=edge" />（我使用了 EmulateIE8，但不得不将其更改为 edge。我在某处读到 googlemaps 不再支持 IE9，所以这可能是原因）。

这解决了我在新窗口中的问题，但 iframe 中的地图仍然显示为白色。

我必须在 googleapi.com 调用中添加“v=3”（不带引号），所以我现在使用这一行：

< SCRIPT type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&v=3">

现在我的地图在 IE(11)、Firefox 和 Chrome 中再次工作（我没有测试其他浏览器）。

希望这对你也有帮助。

【讨论】：