“エンジニアの困った”をメモるブログ

teckmemo

その他

Google Mapsが表示されない場合がある問題を解決

更新日:

Google Maps JavaScript API v3 を使用して地図を表示しようとしたものの、上手くいきませんでした。少々強引ながらも、この問題について解決したのでその方法をご紹介します。

スポンサーリンク

Google Mapsが表示されない場合がある問題を解決

Google Mapsが表示されないときがありました。(表示されるときもありました。)
Railsで使おうとしたので、そういった相性の問題もあるのかもしれません。恐らく、Google Mapsのスクリプトが読み込まれるタイミングの問題かな?と思いましたが、何をしても上手くいきません。

そこで、マップが表示されるまで同じ処理を繰り返し実行することで、表示されないまま処理が終わってしまう事のないようにしました。

発生したエラー

実際に表示されたエラーが、ReferenceError: Can't find variable: google です。

ドキュメントを見ながら、async と defer を設定してみたり、

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

コールバックを指定してみたり、、

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&callback=initMap"></script>

似たエラーを参考に以下のようにもしてみましたが、どれも結果はいまいちでした。

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]&sensor=true"></script>

解決策

「マップが表示されたか」を確認するため、以下のようにマップの表示領域$('#map')にdiv要素が追加されたかどうかで判断することにしました。

if( $('#map').find('div').length ){

さらに、以下のようにsetIntervalでマップが表示されるまでこれを繰り返します。

timerID = setInterval(ajaxMap, 500);

ザックリとですが、こんな感じで実現しました!

全体のコード

このようにして、完成したコードがこちらです。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <style type='text/css'>
            #map {
                width: 100%;
                height: 600px
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]" async="async" defer="defer"></script>
        <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script>
            var map;
            var timerID = 0;

            StartTimer = function() {
                timerID = setInterval(ajaxMap, 500);
            };
  
            StopTimer = function() {
                clearInterval(timerID);
            };

            function initMap(){
                // #mapに地図を埋め込む
                map = new google.maps.Map(document.getElementById('map'), {
                    center: { // 地図の中心を指定
                        lat: 35.668864, // 緯度
                        lng: 139.4611935 // 経度
                    },
                    zoom: 10 // 地図のズームを指定
                });
            }

            function ajaxMap(){
                initMap();

                if( $('#map').find('div').length ){

                    // マーカー毎の処理
    
                    StopTimer();
                }
            }

            $(function() {
                StartTimer();
            });
        </script>
    </body>
</html>
困ってる方いたら、ぜひ使ってみてください!

-その他
-, ,

Copyright© teckmemo , 2019 All Rights Reserved.