谷歌地图API不显示(固定高度/宽度无法解决)

Question

显示地图以前可以工作，但由于某种原因，我真的无法确定它停止工作。

这是我的 html 包含：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=THIS_KEY_IS_CORRECT">
</script>

这是我的 html：

(with style tags)
#map { height: 500px; }
<div id="map" > </div> 

还有我的JavaScript

setTimeout(() => {
console.log("Running init map");
var map_div = document.getElementById("map");
var map_handler = new google.maps.Map(map_div, map_options);
console.log(map_handler);
},2000);

以下是map_handler的控制台日志：

ug {__gm: Yf, W: undefined, mapTypes: Object, features: Object, overlayMapTypes: _.td…}

所以map_handler实际上是在返回一些东西。

正如我所说，这曾经有效。由于某种原因，它不再了。

知道为什么吗？

谢谢。

Answer 1

虽然这不是问题的主要来源 - 请注意，您不能依靠setTimeout来告诉您何时加载了谷歌地图 JS API。使用回调：

<script async defer
src="https://maps.googleapis.com/maps/api/js?key=THIS_KEY_IS_CORRECT&callback=myMapIsReady">
</script>

然后

<script>
var myMapIsReady = function() {
console.log("Running init map");
var map_div = document.getElementById("map");
var map_handler = new google.maps.Map(map_div, map_options);
console.log(map_handler);  
};
</script>

问题是，你为什么说这不起作用？怎么不行？您在屏幕上看到了什么？

提示可能是您尚未显示其定义位置map_options，如果您初始化没有中心latlng/zoom的Google地图，则只会看到一个灰色块。