LoginSignup
16
13

More than 5 years have passed since last update.

Rails4+turbolinks環境でgooglemap apiを使う時の注意点

Last updated at Posted at 2014-07-07

期待通り動くまでに苦労したので、ここで共有します。

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()

以上です。
間違いなどがありましたら指摘していただけると嬉しいです。

参考

16
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
13