はじめに
railsでGoogleMapのAPIを導入するに当たり参考文献を拝見しつつもつまづいたところを備忘録として残します。すべてを網羅しているわけではありませんが同じように悩んでいる人の力になれればと思います。
実装したいこと
イベントを投稿する際に入力した住所を自動的にGoogleMapに反映させる
用意するもの
- Google Cloud Platformへアクセスして、APIキーを取得
- gemであるgeocoderのインストール
※参考にした記事
【Rails6 / Google Map API】初学者向け！Ruby on Railsで簡単にGoogle Map APIの導入する
環境
- Rails 6.0.3.4
- geocoder 1.6.4
つまづいたところ
①コードを記述したが地図が表示されない
※記述や導入方法に関する詳しい記事は下記参考
Rails 登録した住所をGoogle Mapで表示させる
var test ={lat: <%= @event.latitude %>, lng: <%= @event.longitude %> };
こちらの「lat:」が緯度、「lng:」が経度となっておりgeocoderがテーブルにあるそれを取得してマップに位置を表示します。
原因：緯度、経度が正しく取得できていない。
___確認すべきこと：
- addoressテーブルに「latitude(緯度)」、「longitude(経度)」のカラムがあるか
- カラムに保存するためのモデルへの記述があるか
- APIキーがすぐに反映していないことがあるためその場合はサーバー再起動や時間を少し置く___
上記リンクの参考記事にすべてありますので詳細はそちらを。
②緯度と経度をテーブルに保存できない
緯度と経度を保存するためにはテーブルにそれぞれのカラムを設定する必要があります。
addressカラムに保存した住所を元にgeocoderが緯度、経度を取得して保存してくれる仕組みですがaddressが保存されてもlatitude,longitudeが「Null」のままでした。
原因：
addoressのあるテーブルのmigrationファイルをrollbackして書き加えるのではなく「追加」でlatitude,longitudeカラムを加える。
こちらを大きく勘違いしていました。addoressのあるeventテーブルのmigrationファイルをrollbackしてカラムを書き加えてrails db:migrateではだめです。
% rails generate migration AddColumnEvents
必ず追加のmigrationファイルを作成してそちらにカラムを加える必要があります。
class AddColumnEvents < ActiveRecord::Migration[6.0]
def change
add_column :events, :latitude, :float
add_column :events, :longitude, :float
end
end
このような記述でカラムが追加可能です。カラムの型はfloatです。
% rails db:migrate
追加できたらmigrateを忘れずに。
このような形で緯度と経度の値が保存できました。
③詳細な位置情報が取得できない
例）神奈川県横浜市中区山下町
→ざっくりとした住所は取得でき反映するが地図の意味がない
例）神奈川県横浜市中区山下町○○番地
→ピンポイントの位置情報をしっかり取得したい
原因：
より正確な位置情報を得るためにgeocoderのconfigの設定を変更する。
% bin/rails g geocoder:config
コマンドによってconfigファイルが生成されます。
(config/initializers/geocoder.rb)
Geocoder.configure(
# Geocoding options
timeout: 5, # geocoding service timeout (secs)
lookup: :google, # name of geocoding service (symbol)
# ip_lookup: :ipinfo_io, # name of IP address geocoding service (symbol)
# language: :en, # ISO-639 language code
use_https: true, # use HTTPS for lookup requests? (if supported)
# http_proxy: nil, # HTTP proxy server (user:pass@host:port)
# https_proxy: nil, # HTTPS proxy server (user:pass@host:port)
api_key: YOUR_API_KEY, # API key for geocoding service
# cache: nil, # cache object (must respond to #[], #[]=, and #del)
# cache_prefix: 'geocoder:', # prefix (string) to use for all cache keys
# Exceptions that should not be rescued by default
# (if you want to implement custom error handling);
# supports SocketError and Timeout::Error
# always_raise: [],
# Calculation options
units: :km, # :km for kilometers or :mi for miles
# distances: :linear # :spherical or :linear
)
位置情報の取得先の設定である'lookup:'を'google'にして'api_key:'には取得したAPIキーを入力しましょう(ここではYOUR_API_KEYと置き換えています)。
無事解決です。