Ruby
Gem
GoogleMapsAPI
RubyOnRails

Rails GoogleMap表示 gem gmaps4railsとgeocoder

More than 1 year has passed since last update.

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

ed9dfc8badb88af32e2cb6522bfc6724.png

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

450f2a7db1e2294655a817814bbfeff4.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