Rails GoogleMap表示 gem gmaps4railsとgeocoder

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

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

```ruby:コンソール
$ rails new gmap
$ cd gmap
```

#3 Scaffold導入

```ruby:コンソール
$ rails g scaffold place name:string description:string latitude:float longitude:float
$ rake db:migrate
```

#4 Gemインストール

```ruby:gmap/Gemfile
gem 'gmaps4rails'
gem "geocoder"
```

```ruby:コンソール
bundle install
```

#5 JSの導入

##5.1 application.html.erb

```ruby: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コピぺ

```ruby:app/assets/javascripts/underscore.js
以下リンクコピー
```

[ここの内容コピー](http://underscorejs.org/underscore-min.js "ここの内容コピー")

##5.3 application.js

```ruby:app/assets/javascripts/application.js
//= require underscore
//= require gmaps/google
```

#6 モデル修正

```ruby: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 ビュー修正

・追加部分

```ruby: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>
```

・全体

```ruby: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 にアクセス

<img width="662" alt="ed9dfc8badb88af32e2cb6522bfc6724.png" src="https://qiita-image-store.s3.amazonaws.com/0/166383/c257cc94-3f3e-4a10-b5f5-a06f753d54fd.png">

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

<img width="850" alt="450f2a7db1e2294655a817814bbfeff4.png" src="https://qiita-image-store.s3.amazonaws.com/0/166383/2cb7392b-846d-293b-7199-37d6dbdcdcba.png">

こんな感じになります！

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

以上！

#10 参考

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