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 키를 얻고 붙여 넣습니다.
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘 타치 온 / 그럼 sc 리 pt / 게 t 아피 케 y

5.2 underscore.js copipe

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 방문



Name에 장소를 넣어 저장하면・・・



이런 느낌이 듭니다!

name에서 geocoder로 경도·위도를 DB에 저장
화면 표시에서 gmaps4rails를 사용하여 저장한 경도·위도에서 맵 표시하고 있다.

이상!

10 참고

htps : // 이 m / 나카 요시 키 / ms / 아 f9f37
htps : // 기주 b. 코 m / 아 p 네 아 ゔ ぃ g / 굿 g ぇ ぇ ぉ ぉ r 라 ls
htps : // 기주 b. 코 m / 오 x x 레이 s r / 게오 코데 r