IT技術にまつわる実験ノート

「長編を書くより、短編を数多く完成させてください。それが上達への近道です」 by 手塚治虫

Rails で Google Maps API (v3) を使ってみる

はじめに

ここでは、以下の記事を参考にして RailsGoogle Maps API を使ってみることにする。なお、ソースコードGitHub で公開されている。

 

使ってみる

ざっくりとアプリを作ってみる。

 

Place モデルを作成する。緯度(latitude)と経度(longitude)の型は、decimal を使用する。

  • bin/rails g scaffold Place name:string latitude:decimal longitude:decimal --javascript-engine=js
  • bin/rails db:migrate

 

シードデータを作成してサーバーを起動する。

 

http://localhost:3000/places にアクセスすると、以下のようになる。

f:id:matt-note:20190220193755p:plain

 

Google Maps API Key を作成する。

f:id:matt-note:20190220194722p:plain

 

API KEY を設定する。atom エディタを使う場合は、以下のコマンドを実行する。

  • EDITOR="atom --wait" bin/rails credentials:edit

f:id:matt-note:20190220195735p:plain

 

この値は、アプリからアクセスできるようになる。

f:id:matt-note:20190220200039p:plain

 

地図を表示してみる。

app/views/places/show.html.erb を編集する。

f:id:matt-note:20190220200838p:plain

f:id:matt-note:20190220202822p:plain

 

画像にマーカーを追加してみる。

app/views/places/show.html.erb をもう一度、編集する。

f:id:matt-note:20190220203452p:plain

f:id:matt-note:20190220203605p:plain

 

Google Maps JavaScript API を使ってみる。

head タグに 以下のタグを追加する。

 

show.html.erb と places.scss を編集する。

 

 application.html.erb(headタグ内)と show.html.erb を編集する。

 

assets/javascripts/places.js を編集する。

 

すると、以下のようになる。

f:id:matt-note:20190220220206p:plain

 

マーカーを表示してみる。

f:id:matt-note:20190220224509p:plain

 

ざっと使ってみたところ、JavaScript API の方が処理速度が速いと言って良いのかもしれない。

f:id:matt-note:20190220225048p:plain

 

ただし、RailsJavaScript API を使う場合は、Turbolinks への対応を行う必要がある。

 

フォームの入力からマップを作成してみる。

 

places.scss と places.js を編集する。

 

イベント名(drag など)にリスナ関数を追加するメソッドとして、addListener メソッドを使うことができる。

 

これでマーカーを動かすと、自動的に緯度と経度が入力されるようになる。

f:id:matt-note:20190221131812p:plain

 

なお、この方法で Google Maps API を使うと、API キーがブラウザから丸見えになる。この点をどうすれば良いのかは不明。

f:id:matt-note:20190221132124p:plain

 

また、API のバージョンが変わると、新しいバージョンに対応し直す必要がある。

 

おわり

ここでは、緯度と経度からマップを表示するアプリを作ってみた。なお、住所から座標を取得するには、Google Maps Geocoding API を使う必要がある。

f:id:matt-note:20190221133213p:plain