このGoogleマップのエラーはなんでしょうか。

Question

サイト内にGoogleマップの読み込んだ際にエラーが時々出ます。

基本的には正しく読み込んでくれるんですが、たまに読み込まない時があり、デベロッパーツールで見てみると
下記のようなエラーが出ています。

Uncaught (in promise) TypeError: Cannot read property 'firstChild' of null
　　at Object._.re (js?key=A[APIキー]&callback=initMap:73)
    at new Qg (js?key=[APIキー]&callback=initMap:112)
    at initMap (index.js:3)
    at js?key=[APIキー]&callback=initMap:123
    at js?key=[APIキー]&callback=initMap:123

	<script src="./js/map.js"></script>
	<script async defer src="https://maps.googleapis.com/maps/api/js?key=[APIキー]&callback=initMap"></script>

ボディ内に
　　　<div id="map"></div>

function initMap() {
        var latlng = new google.maps.LatLng( XX.XXXXXX, XXX.XXXXXX );
        var map = new google.maps.Map(document.getElementById('map'), {
            zoom: 17,
            center: latlng
        });
			
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: 'http://～～/img/mao_icon.png'
        });
  }

#map {
    width: 100%;
    height: 370px;
}

調べてみたところ読み込みのタイミングのせいで起きるエラー？といった感じぽいのですが
いまいちよくわかりません…

どういった時このエラーが出るのか、解説を出来る方いましたらよろしくお願いします。

Comments

[kunai]

エラーが出ている該当箇所(new google.maps.Mapあたり)のコードを見せていただけませんか。そのままだと「空の値の子要素を取得しようとしてエラーになっている」としかわかりません。

[no_title]

とりあえず関係ある箇所の記述をすべて追記してみました！ご確認ください。いかかでしょうか？

Answer 1

script要素を</body>直前（ id="map" より後）に動かしてみてください。