Rails GoogleMap表示 gem gmaps4railsとgeocoder

#1 はじめに
・gem gmaps4railsとgeocoderを使ったGoogleMap表示にサンプル
・scaffold使って簡単に作ります。
・erbで作ります。
・基本的にコピペで作れるはず・・・

#2 アプリケーションの作成

コンソール

$ rails new gmap
$ cd gmap

#3 Scaffold導入

コンソール

$ rails g scaffold place name:string description:string latitude:float longitude:float
$ rake db:migrate

#4 Gemインストール

gmap/Gemfile

gem 'gmaps4rails'
gem "geocoder"

コンソール

bundle install

#5 JSの導入

##5.1 application.html.erb

app/views/layouts/application.html.erb

<script src="//maps.google.com/maps/api/js?key=APIキー"></script>
<script src="//cdn.rawgit.com/mahnunchik/markerclustererplus/master/dist/markerclusterer.min.js"></script>
<script src='//cdn.rawgit.com/printercu/google-maps-utility-library-v3-read-only/master/infobox/src/infobox_packed.js' type='text/javascript'></script>

・APIキー
以下からAPIキーの取得して貼り付ける。
https://developers.google.com/maps/documentation/javascript/get-api-key

##5.2 underscore.jsコピぺ

app/assets/javascripts/underscore.js

以下リンクコピー

ここの内容コピー

##5.3 application.js

app/assets/javascripts/application.js

//= require underscore
//= require gmaps/google

#6 モデル修正

app/models/place.rb

class Place < ApplicationRecord
  geocoded_by :name
  after_validation :geocode
end

#7 コントローラー修正

app/controllers/places_controller.rb

  def show
    @hash = Gmaps4rails.build_markers(@place) do |place, marker|
      marker.lat place.latitude
      marker.lng place.longitude
      marker.infowindow place.name
    end
  end

#8 ビュー修正

・追加部分

app/views/places/show.html.erb

<div id="map" style="width: 800px; height: 400px;"></div>

<script>
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%= raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

・全体

app/views/places/show.html.erb

<p id="notice"><%= notice %></p>

<p>
  <strong>Name:</strong>
  <%= @place.name %>
</p>

<p>
  <strong>Description:</strong>
  <%= @place.description %>
</p>

<p>
  <strong>Latitude:</strong>
  <%= @place.latitude %>
</p>

<p>
  <strong>Longitude:</strong>
  <%= @place.longitude %>
</p>

<%= link_to 'Edit', edit_place_path(@place) %> |
<%= link_to 'Back', places_path %>

<div id="map" style="width: 800px; height: 400px;"></div>

<script>
  handler = Gmaps.build('Google');
  handler.buildMap({ provider: {}, internal: {id: 'map'}}, function(){
    markers = handler.addMarkers(<%= raw @hash.to_json %>);
    handler.bounds.extendWith(markers);
    handler.fitMapToBounds();
  });
</script>

#9 完了！　rails s!

http://localhost:3000/places/new にアクセス

　Nameに場所を入れて保存すると・・・

こんな感じになります！

nameからgeocoderで経度・緯度をDBに保存
画面表示で、gmaps4railsを使って、保存した経度・緯度からマップ表示している。

以上！

#10 参考

https://qiita.com/nakanoyoshiki/items/af9f37e9d2653518d6b0
https://github.com/apneadiving/Google-Maps-for-Rails
https://github.com/alexreisner/geocoder