Googleのgeocoding APIで詳細ページに地図表示

Question

前提

現在、airbnbのような宿検索アプリの個人開発を制作中です。
そこで、airbnbのように投稿するごとに、宿それぞれの大体のエリアの表示を詳細ページに記載する実装を行っているのですが、
最初の投稿以降、他の詳細ページにはGoogle Mapが表示されません。
1件目の投稿以降、データベースに経度緯度の値も保存されません、、。

使用しているgemは以下です。(開発環境は補足情報に記載しています。)

gem 'geocoder'　＝＞今回の実装では使用しないので削除しました。
gem 'gmaps4rails'
gem 'gon'
gem 'dotenv-rails'

使用している、APIは、maps javascript APIと　Geocoding APIの二つです。

実現したいこと

以下airbnbの詳細ページのように、宿を投稿するごとにそれぞれの大体のエリア表示をさせたいです。

発生している問題・エラーメッセージ

開発環境のconsoleを確認したところ、以下のようなエラーが表示されています。
さらに、投稿時にDBに経度・緯度のカラムをlatitude, longitudeとして
migrateさせたのですが、1回目以降はカラムに経度緯度共に、nullになってしまっています。

- 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

該当のソースコード

以下、コントローラ一部です。

  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を利用して、登録と更新のどちらの場合にも同じ処理を行えるように記述を変更しました。

geocoded_by :prefecture_city
  beore_save :geocode

上記の記述でnew.html.erbファイルに:prefecture_cityカラムを入力した後に
geocodeで経度と緯度に変換して、詳細ページで以下のように表示させる記述をしています。

  <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'

Comments

[Lhankor_Mhy]

Railsタグをお使いになられては？

[kanako417]

ご回答ありがとうございます！！

<script>タグ内のpinのRailsの部分にシングルクォーテーションを記述しました！
すると、投稿したconsoleのエラーメッセージは解消したのですが、
今度は投稿時にDBへ経度緯度が保存されておらず、
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
とされてしまいます。

config/initializers/geocoder.rb内に、
lookup: :google,と記述はしているのですが。
アドバイスいただければと思います、、。

[Lhankor_Mhy]

いえ、質問にRailsタグがないので、この状態だとRubyが書ける回答者の目に留まらないんじゃないか、ということが言いたいのです。

[kanako417]

なるほど！ありがとうございます！修正させていただきました！^ ^

Answer 1

新規投稿ページから、geocoderをしてDBにgeocodeを保存するのではなく
google Geocoder APIを使用して
adressプロパティの値に、詳細ページに呼び出した住所情報を記述して、変数に代入することで、各詳細ページに地図情報を表示させることが出来ました！

<script>
// callbsck関数を読み込む
function googleMap()
  'use strict';
// mapを描画する範囲の指定
  var map = document.getElementById('map');
//　geoocoderのインスタンスを生成
  var geocoder = new google.maps.Geocoder();

// rubyのデータをadressプロパティの値に設定。地域を日本に設定。
  geocoder.geocode({address: '<%= @lodge.prefecture_city%>', 
  region: 'jp'}, function(results, status){
    if (status === 'OK' && results[0]) {
      new google.maps.Map(map, {
        center: results[0].geometry.location,
        zoom: 12
      });
    } else {
      alert('失敗しました。理由： ' + status);
      return;
    }
  });
}
</script>

Answer 2

• InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number

-InvalidValueError：setCenter：有限座標のLatLngまたはLatLngLiteralではありません：プロパティ内lat：数値ではありません

• InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

-InvalidValueError：setPosition：LatLngまたはLatLngLiteralではありません：プロパティlat：数値ではありません

geocodeで経度と緯度に変換して、

geocodeの処理はどの様になされていますか？

またAPIからの応答内容には緯度経度情報が付随されている事は確認済みなのでしょうか？
ジオコーディング
(エラー判定等行われていますか？)

Comments

[kanako417]

ご回答ありがとうございました！
方法を変えたら、出来ました！！
新規作成ページに記入した住所をgeocodeしてDBにgeocode情報を保存し(gem 'geocoder'使用)、それを詳細ページで表示させる。という方法ではなく、
Geocoder APIを使用し、
geocodeのadressプロパティの値に、rubyで呼び出した住所データをJavaScriptで読み込み、
OKであればgeocoderして、無事に地図を各詳細ページに表示させることが出来ました！

[kanako417]

geocodeの処理に着目したところ、このように思い通りの実装にたどり着く頃が出来たので、
今回はkuma_kuma_さんをベストアンサーにさせていただきます！

御二方、ありがとうございました！