heroku時にlat, lngが空になった話

オリジナルアプリにgooglemapを導入しました。

データベースで保存している住所を詳細ページに表示したいためgeocoder apiを使用し多方法をまとめてheroku時のエラー解決方法をまとめたいと思います。

※ここではapiの取得設定などの説明は省かせていただきます。

まずは下記gemを追加bundle installしてgeocoderをrailsで使用できるようにします。

gem 'geocoder'

次に詳細ページを表示するためにはlatitudeとlongitudeが必要なので住所の情報が登録された時に自動で保存されるように設定します。

まずはカラムを追加しましょう！！

class AddColumnsToRestaurants < ActiveRecord::Migration[6.0]
  def change
    add_column :restaurants, :latitude, :float
    add_column :restaurants, :longitude, :float
  end
end

latとlngにはえげつない小数点がでるのでカラムの型はfloatとしましょう。

モデルに下記記述でaddressカラムを追加した時に自動的にその住所の緯度経度を取得してくれます。

restaurant.rb

geocoded_by :address
  after_validation :geocode

ここで注意しなければならないのがgeocoder gemでは詳細な住所の場所まではわからないよ！！と言われ、latとlngが保存されないので最強のgoogleのgeocodingサービスを使っちゃいましょう。

congig/initialize/geocoder.rb

Geocoder.configure(
  # Geocoding options
  # timeout: 3,                 # 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: あなたのAPI,               # 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: :mi,                 # :km for kilometers or :mi for miles
  # distances: :linear          # :spherical or :linear
)

これで詳細な住所を登録した際latとlngも保存されちゃいます。

詳細ページでレコードを取得して。。。

restaurants_controller.rb

def show
  @restaurant = Restaurant.find(params[:id])
end

show.html.erb

let test ={lat: <%= @restaurant.latitude %>, lng: <%= @restaurant.longitude %>};

これで変数testに店の情報が入りました。あとはcallback関数の中でマップを書く記述をすればオッケー！！markerの設定をしたりaddListnerでアニメーションをつけるのも良いでしょう。

開発環境ではこれでも問題なかったのですがデプロイしたらこんなエラーが。。。

Uncaught token ...

sourceを見てみると

let test ={lat: , lng: };

なぜか取得できてない！！！調べていくうちにアセットパイプラインがうまく行ってない可能性があるとの事だったので

アセットパイプラインの処理を自動化して解決しました。

config/enviroments/production.rb

config.assets.compile = true

原因はアセットパイプラインが無効になっていたのでjsがうまく圧縮してなかったという事でしょうか。。