search
LoginSignup
23

More than 5 years have passed since last update.

posted at

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

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

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
What you can do with signing up
23