auの日記

プログラミング初心者の日記。(auはハンドルネームです)

Google Maps APIを使ったときにUncaught (in promise)のエラーを解消する方法

auです。

Google Maps APIJavaScriptで使っている際に、Uncaught (in promise)というエラーに巡り合い、解消するのに時間がかかってしまったので解消法を書いておこうと思います。

エラー文

エラー文の詳細は以下の通りです。

Uncaught (in promise) ne {message: "Map: Expected mapDiv of type Element but was passed null.", name: "InvalidValueError", stack: "Error↵    at new ne (https://maps.googleapis.com/m…{Your API}&callback=initMap:144:75"}

実際のコードは以下の通りです。

<head>
    <!-- Google Map API -->
    <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key={Your API}&callback=initMap" async defer></script>
    <script>
    function initMap() {
            // 緯度・経度を変数に格納
            var lat = 35.730629
            var lng = 139.708697;
            var mapLatLng = new google.maps.LatLng(lat, lng);
            // マップオプションを変数に格納
            var mapOptions = {
                zoom : 15,          // 拡大倍率
                center : mapLatLng  // 緯度・経度
            };
            //マップオブジェクト作成
            var map = new google.maps.Map(
                document.getElementById("map"), // マップを表示する要素
                mapOptions         // マップオプション
            );
            // マップにマーカーを表示する
            var marker = new google.maps.Marker({
                map : map,             // 対象の地図オブジェクト
                position : mapLatLng   // 緯度・経度
            });
        }
    </script>
</head>

解消法

問題となっていたのは、headに両方書いてしまっている点です。

Google Maps APIを読んでいるコードをbody内に移動して解消しました。

<head>
    <script>
    function initMap() {
            // 緯度・経度を変数に格納
            var lat = 35.730629
            var lng = 139.708697;
            var mapLatLng = new google.maps.LatLng(lat, lng);
            // マップオプションを変数に格納
            var mapOptions = {
                zoom : 15,          // 拡大倍率
                center : mapLatLng  // 緯度・経度
            };
            //マップオブジェクト作成
            var map = new google.maps.Map(
                document.getElementById("map"), // マップを表示する要素
                mapOptions         // マップオプション
            );
            // マップにマーカーを表示する
            var marker = new google.maps.Marker({
                map : map,             // 対象の地図オブジェクト
                position : mapLatLng   // 緯度・経度
            });
        }
    </script>
</head>

<body>
    <div id="map"></div>
    <!-- Google Map API -->
    <script src="https://maps.googleapis.com/maps/api/js?language=ja&region=JP&key=AIzaSyBh44mEO1UXp6gD88rlgLY7ktH8zbFuU64&callback=initMap" async defer></script>
</body>

エラーなく動くようになりました。

ファイルを読み込む順番も注意しなくてはいけないことを学ぶことができました。