2021年12月23日

プログラミング

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

目次

  1. はじめに
  2. 背景
  3. 使用したAPIについて
  4. 実装
  5. 動作イメージ
  6. まとめ

はじめに

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

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

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

背景

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

  1. 1
    勤務地の住所情報を元に緯度経度を自動算出する
  2. 2
    自動算出してた緯度経度を元にgoogleMAPにピンを立てる
  3. 3
    埋め込んだgoogleMAPを見ながらピンの位置の修正ができ、緯度経度が更新される

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

使用したAPIについて

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

使用したAPI

  • Geocoding API
    住所の情報を緯度経度などの座標に置き換える
  • Maps JavaScript API
    地図の表示やマーカーのドラッグなどGoogle Mapの機能をウェブサイトやアプリに埋め込むことができる
APIの利用方法

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

  1. 1
    Googleアカウントの作成
  2. 2
    Google Maps Platform上でプロジェクトの作成
  3. 3
    請求先情報の登録画面にてクレジットカード情報を登録
  4. 4
    API KEYの発行

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

APIの制限について

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

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

無料枠について

  • 1ヶ月200ドル分まで無料で利用可能
  • 回数で言うと約28000回Googleマップやストリートビューを表示
  • 以降は1000回あたり7ドルなので、1回あたり0.007ドルが課金される

また、法人で利用する場合にカードが無い・請求書が必要・銀行振り込みにしたい等でクレジットカードを使いたくない場合は、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>

POINT!!

YOUR_API_KEYは秘匿情報のため、環境変数を使用するか、credentials.yml.encを使ってコードに直書きせずに使用する!

動作イメージ

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

2021_12_23.gif (6.6 MB)

まとめ

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

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

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

Ruby on Railsのお仕事に関するご相談

Bageleeの運営会社、palanではRuby on Railsに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

suzuki

suzuki

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

ando

CONTACT PAGE TOP