【Rails5】gmaps4rails + geocoder で GoogleMapを表示させる

google map rails

Ruby on Rails で gmaps4rails と geocoder というライブラリを使って、ユーザーが入力したアドレスから、経度と緯度を取得して、Google Map を表示できるように実装していきたいと思います。

Google Maps for Rails
https://github.com/apneadiving/Google-Maps-for-Rails
Geocoder
https://github.com/alexreisner/geocoder

環境はこちらです

準備

Gemfile

あらかじめ Article モデルがあるとして、そこに緯度・経度のデータを格納するカラムを追加します。

app/assets/javascripts/application.js

こちらからunderscore-min.jsの中身を全てコピーして、underscore.jsという名前で作成し、 app/assets/javascripts/ に配置します。

Models

対象となるモデルに次の記述を追加すると、 geocoder が address から経度・緯度を取得してくれます。

app/models/article.rb

Google APIキー

Google Maps JavaScript APIを使うためにはAPIキーが必要です。
下記URLにGoogleアカウントでログインしてAPIキーを取得してください。
https://console.developers.google.com/?hl=ja

対象レイアウトの head 内に以下の script を読み込ませます。Google Map の APIキーは環境変数に入れています。

app/views/layouts/application.html.erb

Views

オプションで scrollwheel を false に設定するとスクロールイベント(ページのスクロール中にMapが拡大・縮小する)を無効にできます。
handler.getMap().setZoom(拡大率); でマップの拡大率を調節してください。

app/views/articles/show.html.erb

Controllers

ストロングパラメータも忘れずに設定します。

app/controllers/articles_controller.rb

ユーザーがアドレスを入力できるように、 field を追加します。

app/views/articles/_form.html.erb

createすると longitude, latitude に経度・緯度の値が格納されて マップが表示されます。

以上です!ご覧いただき、ありがとうございました!!😊


投稿者:

Shuji

読書したり、プログラミングしたりしています。何かアウトプットできそうなものがあれば投稿していきたいと思います。