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]

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