期待通り動くまでに苦労したので、ここで共有します。
apiロード時の注意点
turbolinksはjsを使い回すので、特定のページでgoogle map apiをロードしようとしても、工夫していなければロードできません。
A: 全てのページでapiを読み込む
サイトにアクセスした時点でapiをロードする方法です。
apiを使わない場合もロードしてしまいますが、最初の読み込み重たくなるだけで、後の動作は快適です。
app/views/layouts/application.html.erb
<head>
<%= javascript_include_tag "http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" %>
</head>
B: apiを使うページヘのリンクだけturbolinkを切る
特定のページだけapiをロードしたい場合は、apiを使うページヘのリンクに対して'data-no-turbolink' => true
を設定すると動作します。
app/views/layouts/application.html.erb
<head>
<%= yield(:head) if content_for?(:head) %>
</head>
app/views/hoges/index.html.erb
<% content_for(:head) do %>
<%= javascript_include_tag "http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" %>
<% end %>
<%= link_to 'View Map', hoges_path, class: "btn", 'data-no-turbolink' => true %>
トリガー発火時の注意点
turbolinksの発火条件を追加する必要があります
A: page:changeを追加する
jsはそのままで、htmlが読み込まれた時にマップを初期化するトリガーを追加します。
application.js
google.maps.event.addDomListener(window, 'load', init_map); //元からあるトリガー
+ google.maps.event.addDomListener(window, 'page:change', init_map); //追加したトリガー
B: jquery-turbolinksを使う
Gemfile
gem 'jquery-turbolinks'
applicaion.js
//= require jquery
+ //= require jquery.turbolinks
//= require turbolinks
hoge.js.coffee
$->
init_map()
以上です。
間違いなどがありましたら指摘していただけると嬉しいです。