Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
20
Help us understand the problem. What is going on with this article?
@yuki_chrono

Rails GoogleMap表示 gem gmaps4railsとgeocoder

More than 3 years have 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

20
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yuki_chrono
Webアプリエンジニア Java/JavaScript バックエンドアプリ(決済系)作ってきました。 Ruby on railsとかで開発しているフリーランスエンジニア
mof-mof
「つくって人をしあわせにする」をビジョンにAIチャットボットや開発チームレンタル等のサービスを提供している渋谷のIT企業です

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
20
Help us understand the problem. What is going on with this article?