“若手エンジニアが困ったこと”をメモるブログ

わがままに生きる

その他

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

更新日:

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

スポンサーリンク

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

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

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

発生したエラー

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

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

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

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

解決策

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

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

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

全体のコード

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

困ってる方いたら、ぜひ使ってみてください!

-その他
-, ,

Copyright© わがままに生きる , 2018 All Rights Reserved.