Ruby
Rails
GoogleMap

Rails4でGoogleMapを表示させる

More than 1 year has passed since last update.

RailsでGoogleMapを表示させたい!

と思って調べてみたら、早速出てきました。
その名もGoogle Maps for Rails

早速使ってみる

Githubに載っているチュートリアルに従ってコードを書いて行きます。
YouTubeにも動画が上がっています

とりあえずプロジェクトを用意します。

rails new gmap 
cd gmap

用意するGemを記述

Gemfile
gem "gmaps4rails"
gem "geocoder"
bundle install

緯度経度のデータを格納するModelを用意します。

rails g scaffold user title:string description:string address:string latitude:float longitude:float
rake db:migrate

Userができたら以下のコードを記述します。

user.rb
class User < ActiveRecord::Base
  geocoded_by :address
  after_validation :geocode
end

JSのURLを指定します

views/layouts/application.html.erb
<script src="//maps.google.com/maps/api/js?v=3.13&amp;sensor=false&amp;libraries=geometry" type="text/javascript"></script>
<script src='//google-maps-utility-library-v3.googlecode.com/svn/tags/markerclustererplus/2.0.14/src/markerclusterer_packed.js' type='text/javascript'></script>

underscore.jsはこちらよりコピーしてきます。

vendor/assts/javascripts/underscore.js
(省略)
assets/javascripts/application.js
//= require underscore
//= require gmaps/google

地図ページを用意します

rails g controller map index
views/map/index.html.erb
<div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'></div>
</div>

<script type="text/javascript">
    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>

Controllerを編集します

controllers/map_controller.rb
class MapController < ApplicationController
  def index
    @users = User.all
    @hash = Gmaps4rails.build_markers(@users) do |user, marker|
      marker.lat user.latitude
      marker.lng user.longitude
      marker.infowindow user.description
      marker.json({title: user.title})
    end
  end
end

Userデータを登録

この時点で先にUserにデータを入れておきます。
Userの作成ページにて、Addressに適当な地名を入力します。
更新時にgmap4railsのほうで緯度経度を取得してLatitide/Longitudeに格納してくれます。
どの程度までかわかりませんが、日本語で登録しても問題ないようです。
こんな感じで。

title address latitude longitude
名古屋の場所 名古屋 35.1814464 136.906398
浜松の場所 浜松 34.7108344 137.7261258
静岡の場所 静岡 34.975562 138.3827956

動作確認!

さて、いよいよ起動です。
rails s してlocalhost:3000/map/indexにアクセスしてみます。
デフォルトのままだと味気ないのでTwitterBootstrapRailsを見た目を多少整えています。

My

というわけで

簡単でしたね。
ここまででYouTubeの動画の半分くらいです。後半は色々なオプションの説明となっていました。
それ以外の機能についてはWikiのほうに色々書いてあるみたいですよ。