Ruby on Rails에서 Google Map API를 사용합니다.
7626 단어 루비RailsGoogleMapsAPI
소개
Google API를 처음 사용하므로 다시 사용할 때의 메모
*Google API는 2018년 7월부터 API 키를 사용해야 합니다.
준비
새로운 프로젝트 만들기!!
$ mkdir maps
$ cd maps
$ bundle exec rails new .
Scaffold에서 이름, 위도 및 경도 열이 있는 맵 테이블 만들기
$ bundle exec rails g scaffold map name:string latitude:float longitude:float
$ bundle exec rake db:migrate
Gemfile에 gem "gmaps4rails"
Gemfile
source 'https://rubygems.org'
gem "gmaps4rails"
gem 설치
$ bundle install --path vendor/bundle
보기
자신의 API 키에 취득한 API 키를 추가한다.
API의 취득 방법에 관해서는 이하의 URL로부터 취득할 수 있다.
[API 키를 얻는 방법] ぇぺぺrs. 오, ぇ. 코 m / 마 ps / 도쿠 멘 타치 온 / 그럼 sc 리 pt / 게 t 아피 케 y
application.html.erb
<!DOCTYPE html>
<html>
<head>
-----省略--------
<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>
</head>
자바스크립트
javascript 바로 아래에 underscore.js 파일을 만듭니다.
그리고 여기에서 코드 얻기 그리고 underscore.js에 붙여넣기.
app/assets/javascripts/underscore.js
---省略---
application.js에 underscore 및 gmaps/google 추가
app/asset/javascripts/application.js
//= require underscore
//= require gmaps/google
보기
app/views/maps/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>
view의 index.html.erb 파일의 맨 끝에 위의 코드를 추가합니다.
controller
app/controllers/maps_controller.erbclass MapsController < ApplicationController
before_action :set_map, only: %i(show edit update destroy)
# GET /maps
# GET /maps.json
def index
@maps = Map.all
@hash = Gmaps4rails.build_markers(@maps) do |map, marker|
marker.lat map.latitude
marker.lng map.longitude
marker.infowindow map.name
end
end
end
maps 컨트롤러의 index 메소드에 위와 같은 코드 추가
결과
이제/maps에 액세스하면 아래와 같은 화면이 될 것입니다.
Reference
이 문제에 관하여(Ruby on Rails에서 Google Map API를 사용합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/NagaiKoki/items/2bcc96c20790c0977b56
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
class MapsController < ApplicationController
before_action :set_map, only: %i(show edit update destroy)
# GET /maps
# GET /maps.json
def index
@maps = Map.all
@hash = Gmaps4rails.build_markers(@maps) do |map, marker|
marker.lat map.latitude
marker.lng map.longitude
marker.infowindow map.name
end
end
end
Reference
이 문제에 관하여(Ruby on Rails에서 Google Map API를 사용합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/NagaiKoki/items/2bcc96c20790c0977b56텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
