RailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加する

はじめに

この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay23の記事です！
昨日は「Dockerで作成したRailsアプリケーションをHerokuにデプロイする」についての記事でした。

RDBでセットメニューを表現する方法

今回はRailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加した話です。

背景

今回の実装でやりたかったことのポイントは以下の３つです！

それぞれのやりたいことを実装するために、今回は2つのGoogle APIを使用しました。次の章でどのように実装したのかを説明しようと思います。

使用したAPIについて

今回の実装で使った APIは以下の2つです！

APIの利用方法

上記の APIを利用するには以下の手順が必要になります。

詳細はGoogle公式のドキュメントなどを参照しました。
https://developers.google.com/maps/documentation/android-sdk/get-api-key?hl=ja

APIの制限について

APIの使用制限として、Googleマップを使うにはAPIキーや請求先アカウントの紐づけが必要になります(そのため、アカウントと支払い先登録は必須です)。

ただしAPIには無料枠が存在し、枠を超えた場合のみ使用量に応じて課金される仕組みになっています。

また、法人で利用する場合にカードが無い・請求書が必要・銀行振り込みにしたい等でクレジットカードを使いたくない場合は、Google Maps Platform の法人向けサービスに問い合わせをしてみると良いと思います！

【参考】
料金とプラン | Google Maps Platform | Google Cloud
https://cloud.google.com/maps-platform/pricing
請求アクセス制御の概要
https://cloud.google.com/billing/docs/how-to/billing-access?hl=ja

実装

以下のようなイメージでRailsアプリにGoogleMapを組み込みました。(一部を切り抜いているため、そのままのコピペだと動作しないようになっているのでお気をつけください！)

<h2>gmap</h2>
<div class="form-group">
  <%= form.label :access, "住所" %>
<%= form.text_field :access %></div>
<div class="form-group">
  <!-- buttonをクリックしたらcodeAddressを実行　-->
<input type="button" value="住所検索" onclick="codeAddress()">
<div class="row">
<div class="col-sm-3">
<div id="map"></div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-3">
      <%= form.label :lat, "緯度" %>
<%= form.text_field :lat %></div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-3">
      <%= form.label :lng, "経度"%>
<%= form.text_field :lng %></div>
</div>
</div>
<style>
#map{<br />
  height: 400px;<br />
}<br />
</style><script><br />
<script><br />
  let map<br />
  let geocoder<br />
  let marker<br />
  let uluru<br />
  function initMap() {<br />
    geocoder = new google.maps.Geocoder()</p>
<p>    // 数値が入っていないとマップが非表示になってしまうためnilの場合は0を入れる<br />
   // contollerにて既存に登録している緯度と経度を変数に入れて渡す<br />
    uluru = {lat: <%= @lat || 0 %>, lng: <%= @lng || 0 %>};</p>
<p>    map = new google.maps.Map(document.getElementById('map'), {<br />
      zoom: 16,<br />
      center: uluru<br />
    });</p>
<p>    marker = new google.maps.Marker({<br />
      position: uluru,<br />
      map: map,<br />
      draggable: true   // ドラッグ可能にする<br />
    });</p>
<p>    // マーカーのドロップ（ドラッグ終了）時のイベント<br />
    google.maps.event.addListener( marker, 'dragend', function(ev){<br />
      // イベントの引数evの、プロパティ.latLngが緯度経度。<br />
      document.getElementById('lat').value = ev.latLng.lat();<br />
      document.getElementById('lng').value = ev.latLng.lng();<br />
    });<br />
  }</p>
<p>  function codeAddress(){<br />
    // 入力された住所を取得<br />
    let inputAddress = document.getElementById('access').value;<br />
    // geocodingしたあとmapを移動<br />
    geocoder.geocode( { 'address': inputAddress}, function(results, status) {<br />
      if (status == 'OK') {<br />
        uluru = results[0].geometry.location;</p>
<p>  　　　 // map.setCenterで地図が移動<br />
        // google.maps.MarkerでGoogleMap上の指定位置にマーカが立つ<br />
        map.setCenter(uluru);<br />
        marker.setPosition(uluru);</p>
<p>        document.getElementById('lat').value = uluru.lat();<br />
        document.getElementById('lng').value = uluru.lng();<br />
      } else {<br />
        alert('該当の住所が見つかりませんでした');<br />
      }<br />
    });<br />
  }<br />
</script>
<script src="<%=" "https:="" maps.googleapis.com="" maps="" api="" js?key="YOUR_API_KEY&callback=initMap"%"><br />
async defer></script>

動作イメージ

動作のイメージは以下のようになります！

まとめ

今回は、RailsアプリにGoogle Mapから緯度経度情報を取得する機能を追加した話について書かせていただきました！

APIKEYの発行などの手順さえできれば、非常に簡単にGoogleMapを自分のアプリに組み込むことができてとても便利だと思いました！

また、実装するにあたりRailsのgemgeocorderについても調査し、このgemもとても面白そうだと思ったので次の機会に紹介できればと思いました！