Google Maps APIが表示されない（固定された高さ/幅が解決しない）

Question

地図が表示されている前に、何らかの理由で表示されていたが、ここで

は私のhtmlを含めるです：

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

そして、ここに私のhtmlです：map_handlerのコンソールログ

(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); 

されています

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

したがってmap_handlerは実際に何かを返す。

私が言ったように、これは働いていました。何らかの理由でそれはもはやありません。

理由は何ですか？

ありがとうございました。

Answer 1

これは問題の主要な原因ではありませんが、setTimeoutに依存してGoogle API 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マップを初期化すると、グレーのブロックが表示されます。