谷歌地圖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來告訴您何時加載了Google地圖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的谷歌地圖，你會看到一個灰色塊。