Rails4에 GoogleMap 표시

Rails로 GoogleMap을 표시하고 싶습니다!

그렇게 생각해서 알아봤는데 금방 나왔어요.
이름도Google Maps for Rails.

얼른

Giithub에 실린 튜토리얼에 따라 코드를 씁니다.
유튜브에도 있다동영상 업로드 중.

프로젝트를 먼저 준비하다.

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에서 위도 경도를 얻은 후 Latide/Logitude에 저장됩니다.
어느 정도인지 모르겠지만 일본어로 등록해도 괜찮을 것 같아요.
이런 느낌.
title
address
latitude
longitude
나고야
나고야
35.1814464
136.906398
장쑤 성
활용단어참조
34.7108344
137.7261258
후미진 곳
정강
34.975562
138.3827956

동작 확인!

그럼, 드디어 시작합니다.
rails를 통해 방문localhost:3000/map/index.
기본적으로 지루할 수 있으니 트위터 부트스트랩 레일즈의 외관을 살짝 조정해 보세요.

즉

간단하네.
여기까지는 유튜브 영상의 절반 정도다.후반부에서는 다양한 옵션을 설명한다.
그것 이외의 기능Wiki에 관해서는 이것저것 쓰여 있는 것 같아요.