前提
現在、airbnbのような宿検索アプリの個人開発を制作中です。
そこで、airbnbのように投稿するごとに、宿それぞれの大体のエリアの表示を詳細ページに記載する実装を行っているのですが、
最初の投稿以降、他の詳細ページにはGoogle Mapが表示されません。
1件目の投稿以降、データベースに経度緯度の値も保存されません、、。
使用しているgemは以下です。(開発環境は補足情報に記載しています。)
gemfile
gem 'geocoder' =>今回の実装では使用しないので削除しました。 gem 'gmaps4rails' gem 'gon' gem 'dotenv-rails'
使用している、APIは、maps javascript APIと Geocoding APIの二つです。
実現したいこと
以下airbnbの詳細ページのように、宿を投稿するごとにそれぞれの大体のエリア表示をさせたいです。
発生している問題・エラーメッセージ
開発環境のconsoleを確認したところ、以下のようなエラーが表示されています。
さらに、投稿時にDBに経度・緯度のカラムをlatitude, longitudeとして
migrateさせたのですが、1回目以降はカラムに経度緯度共に、nullになってしまっています。
console
- InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number - InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number
該当のソースコード
以下、コントローラ一部です。
ruby
def create @lodge = Lodging.new(lodge_params) if @lodge.valid? @lodge.save redirect_to root_path else render :new end end def show @lodge = Lodging.find(params[:id]) gon.lodge = @lodge end
google map API・gem 'geocoder'・googleのgeocoder APIを使用して
投稿ページに都道府県と市区町村までを入力させ、:prefecture_cityとしています。
railsのコールバックである、before_saveを利用して、登録と更新のどちらの場合にも同じ処理を行えるように記述を変更しました。
model
geocoded_by :prefecture_city beore_save :geocode
上記の記述でnew.html.erbファイルに:prefecture_cityカラムを入力した後に
geocodeで経度と緯度に変換して、詳細ページで以下のように表示させる記述をしています。
htmlerb
<div class="under"> <div class="under-child1"> <p class="child1-title">宿について</p> <%= @lodge.description %> </div> <div class="under-child2"> <div id="map"></div> </div> </div> <script type="text/javascript"> var map; var marker; var pin = { lat: gon.lodge.latitude, lng: gon.lodge.longitude }; function initMap() { geocoder = new google.maps.Geocoder() var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center: pin }); var marker = new google.maps.Marker({ position: pin, map: map }); } </script> <script defer src="https://maps.googleapis.com/maps/api/js?key=<%=ENV['GOOGLE_MAP_KEY']%>&callback=initMap"></script>
試したこと
- API keyを更新して、環境変数に新たに設定。
API KEYも環境変数に入れて、rails cで環境変数を確認したところ、きちんとAPI keyが呼び出されます。
- HTTPリファラーを制限。
localhost:3000/*
本番環境のリファラーも追加することを忘れずに!
変更点・改善点
・geocoder APIを新たに利用。
・認証情報のAPIの制限をgeocoding APIと Maps Javascript APIのみに制限。
・gonを使用して、ビューファイルで経度緯度を読み込めるように、controllerとビューのJS内の記述を変更。
補足情報(FW/ツールのバージョンなど)
gem 'rails', '~> 6.0.0'
gem 'mysql2', '>= 0.5.3'
まだ回答がついていません
会員登録して回答してみよう