RailsとGoogle Maps API / Turbolinksでマップが読み込まれない時の対処法

またまたTurbolinkネタ。
よくつまづくからメモが多いのです。

結論。ドキュメント通りにやる。
これです…。
https://developers.google.com/maps/documentation/javascript/tutorial

非同期に読み込むにはこんなコード。ドキュメントより。

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
      'callback=initialize';
  document.body.appendChild(script);
}

  
普通に読み込む時はapiキーが必要なので、必要だろうと思って付け加えるとダメです。

//こうすると…
script.src = 'https://maps.googleapis.com/maps/api/js?' +
        'key=XxxxxyC9HPscInexxxxxlYsUCekQLkHOK06ST3c'

//こんなエラーがでます。
Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened. 

  
あと、コールバックで何もやらないやといってcallback=initializeを省略してもダメです。
APIはpage:loadのタイミングで読み込みたいけど使うのは後、みたいな時。

initialize = ->
  # do nothing

  
とかやってコールバック用の関数を用意してください。
  

Turbolinksなので、
$(document).on('page:load', ready)のタイミングで実行するんですが、
何回も読み込んでしまってもダメなので、下のようになりました。

window.initializeMap = ->
    # do nothing

#Google maps apiの動的読み込み
getGoogleMapApi = ->
    if window.google == undefined
        script = document.createElement('script')
        script.type = 'text/javascript'
        script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
                            'callback=initializeMap'
        script.async = true
        document.body.appendChild(script)

ready = ->
    getGoogleMapApi()
    #他のいろんなこと…

# For turbolinks
$(document).ready(ready)
$(document).on('page:load', ready)

以上です。

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた