rails에서 주소를 입력하면 해당 위치의 googlemap을 표시합니다.
4709 단어 Rail루비geocoderGoogleMapsAPI
하고 싶은 일
교토역이라고 기입해, 푸른 버튼의 등록을 하면, 아래에 교토역의 google map이 나온다.
gem 추가
Gemfile
gem 'geocoder'
터미널
bundle install
모델 설명
이번에는 shop 모델에 주소를 넣고 싶다.
shop 모델
위 그림의 설명은 shop 모델입니다. 가게의 이름과 방문객 수의 컬럼을 만들고 있다.
googlemap 표시를 위해, 컬럼 address latitude longtude를 추가한다.
터미널
rails generate migration AddaddressLatitudeAndLongitudeToShop address:string latitude:float longitude:float
shop.rb
geocoded_by :address
after_validation :geocode, if: :address_changed?
위의 설명에서, 주소(컬럼 address)를 넣었을 때에, 자동으로 그 주소의 위도, 경도를 칼럼 latitude,
longitude에 기술해준다.
등록 화면
show.html.erb
<%= form_for @shop :url => {:action => :update} do |f| %>
<div class="text-center"><%= f.text_field :address %></div>
<%= f.submit "住所登録", class: "btn btn-primary center-block" %>
<% end %>
<body>
<div id="map"></div>
<style>
#map {
height: 500px;
width: 70%;
}
</style>
<script>
function initMap() {
var uluru = {lat: <%= @shop.latitude %>, lng: <%= @shop.longitude %>};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
</body>
아래에서 세 번째 줄 YOUR_API_KEY 설명이 있습니다. 이것은 각자 googlemapAPI로부터 key 취득할 필요가 있다.
ぃ tp // 이 m / 온 / ms / 7f33615940 67c13820
이 링크에 키 취득 방법이 작성되어 있으므로 참고하십시오.
참고문헌
htps : // v. 9바 r. 토키 쇼 / 라이 ls / 게오 코데 r
Reference
이 문제에 관하여(rails에서 주소를 입력하면 해당 위치의 googlemap을 표시합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kitaokeita/items/38dec1fbbb0433fec380텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
