【Ruby】Rails4でGoogleMapを表示させる

Rails4でGoogleMapを表示させる

RailsでGoogleMapを表示させたい！

と思って調べてみたら、早速出てきました。

早速使ってみる

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

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

rails new gmap
cd gmap

用意するGemを記述

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ができたら以下のコードを記述します。

class User &lt; ActiveRecord::Base
  geocoded_by :address
  after_validation :geocode
end

JSのURLを指定します

views/layouts/application.html.erb

vendor/assts/javascripts/underscore.jsをこちらよりコピーしてきます。

assets/javascripts/apprication.js

//= require underscore
//= require gmaps/google

地図ページを用意します

rails g controller map index

map/index.html.erb


views/map/index.html.erb

<pre lang="html"><div style='width: 800px;'>
  <div id="map" style='width: 800px; height: 400px;'>

  </div>

</div>

Controllerを編集します

ruby:controllers/map_controller.rb

class MapController &lt; 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を見た目を多少整えています。

というわけで

簡単でしたね。

ここまででYouTubeの動画の半分くらいです。後半は色々なオプションの説明となっていました。

それ以外の機能についてはWikiのほうに色々書いてあるみたいですよ。