はじめに

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ファイルを作成してそちらにカラムを加える必要があります。

xxxxxxxxxxx5_add_column_events.rb

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)

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と置き換えています)。

無事解決です。

参考記事まとめ

【Rails6 / Google Map API】初学者向け！Ruby on Railsで簡単にGoogle Map APIの導入する
Rails 登録した住所をGoogle Mapで表示させる
geocoderで緯度と経度が登録されない問題