목표

주소를 입력하면 GoogleMap에 핀이 서 있습니다.

구현

MAP 모델


열 이름
금형
내용


address
string형
장소의 이름과 주소

latitude
float 형
address의 위도

longitude
float 형
address 경도

준비

GoogleMap API를 받으세요.
(참고: htps : // 네네 b. 코m/276 )

구현

애플리케이션 만들기

$ rails new address_sample
$ cd address_sample

Gemfile에 다음을 추가합시다.

Gemfile.

gem 'http'

Windows 사용자는 OpenSSL이 기본적으로 포함되어 있지 않으므로 다음 gem도 Gemfile에 추가하십시오.

Gemfile.

gem 'openssl'

$ bundle install
$ rails g scaffold map address:string latitude:float longitude:float
$ rails db:migrate

모델 변경

after_validation 에 의해 검증이 행해진 직후 (테이블 내용에 변경이 있을 때)에 geocode 를 실행할 수 있도록(듯이) 합니다.geocode의 내용은 Google의 geocoding하는 API를 두드려 반환된 위도와 경도의 정보를 Map 테이블의 latitude와 longitude에 넣습니다.
uri의 URL 부분에 이전에 얻은 API 키를 잊지 마세요. (참고: htps : // 네네 b. 코m/276 )

app/models/map.rb

class Map < ApplicationRecord
  after_validation :geocode

  private
  def geocode
    uri = URI.escape("https://maps.googleapis.com/maps/api/geocode/json?address="+self.address.gsub(" ", "")+"&key=[ここにAPIキー]")
    res = HTTP.get(uri).to_s
    response = JSON.parse(res)
    self.latitude = response["results"][0]["geometry"]["location"]["lat"]
    self.longitude = response["results"][0]["geometry"]["location"]["lng"]
  end
end

뷰 변경

입력 항목 삭제

위도와 경도는 자동으로 레코드에 추가되므로 views/maps/_form.html.erb 위도와 경도를 입력하는 다음 부분을 삭제합시다.

app/views/maps/_form.html.erb

<div class="field">
  <%= form.label :latitude %>
  <%= form.text_field :latitude %>
</div>

<div class="field">
  <%= form.label :longitude %>
  <%= form.text_field :longitude %>
</div>

자바 스크립트로지도를 표시

maps/show.html.erb의 첫 번째 줄에 다음을 추가하십시오. 이것이 맵을 표시하는 곳입니다.

app/views/maps/show.html.erb

<div id=map></div> 

또한 동일한 maps/show.html.erb 맨 아래에 다음을 추가하십시오. 이것은 map을 표시시키는 javascript입니다. 여기에도 API 키를 입력합니다. (참고: htps: // 네네 b. 코m/276 )var test에서 위도와 경도를 받고 GoogleMap에 전달하여 GoogleMap에 표시 할 수 있습니다.

app/views/maps/show.html.erb

<script type="text/javascript">
  function initMap() {

    var test = {lat: <%= @map.latitude %>, lng: <%= @map.longitude %>};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: test
    });
    var transitLayer = new google.maps.TransitLayer();
    transitLayer.setMap(map);

    var contentString = '住所：<%= @map.address %>';
    var infowindow = new google.maps.InfoWindow({
      content: contentString
    });

    var marker = new google.maps.Marker({
      position:test,
      map: map,
      title: contentString
    });

    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  }
</script>
<script async defer
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=[ここにAPIキー]&callback=initMap">
</script>

CSS로 맵의 크기 지정

application.css에 다음을 추가합니다. 이렇게하면 맵의 크기를 지정할 수 있습니다.

app/assets/stylesheets/application.css

#map {
  height: 400px;
  margin-left:auto;
  margin-right:auto;
  text-align:left;
  width: 80%
}

게시해 보자.

localhost:3000/maps/new에서 주소와 장소를 게시하십시오. 게시하면 show 페이지로 날아가 GoogleMap이 표시됩니다.