rails gem"gon"を利用したjavascriptファイルへのデータの引き渡しがうまくいかない。

Question

rails gem"gon"を利用したjavascriptファイルへのデータの引き渡しがうまくいかない。

現在Googlemap APIを利用して、ユーザーがおすすめの場所を投稿、共有できるようなプロダクトを作成しております。
全投稿をマーカーとして表示したマップをホーム画面に表示しようかと考えているのですが、ピンが表示されず、お知恵をお借りいただけますと幸いです。

具体的には以下のようなコードを設定しております。

背景

• PostモデルとSpotモデルを作成。Postモデルには投稿内容が、Spotモデルには位置情報（address, latitude, longitude）を保存している。
• PostモデルとSpotモデルは一対一の関係。

homeページのコントローラー

def home
  @posts = Post.all.includes([:spot])
  gon.posts = @posts
end

assets/javascript/googlemap.js

let map
let marker = [];
let geocoder

function initMap(){
  geocoder = new google.maps.Geocoder() //GoogleMapsAPIジオコーディングサービスにアクセス
  map = new google.maps.Map(document.getElementById('map'), { //'map'というidを取得してマップを表示
    center: {lat: 35.6594666, lng: 139.7005536}, //最初に表示する場所（今回は「渋谷スクランブル交差点」が初期値）
    zoom: 15, //拡大率（1〜21まで設定可能）
  });
  for (var i = 0; i < gon.posts.length; i++) {
    var markerLatLng = new google.maps.LatLng({lat: gon.posts[i].spot.latitude, lng: gon.posts[i].spot.longitude}); // 緯度経度のデータ作成
    marker[i] = new google.maps.Marker({ // マーカーの追加
      position: markerLatLng, // マーカーを立てる位置を指定
      map: map // マーカーを立てる地図を指定
    });
}

エラー内容
上記のコードではピンが一件も表示されません。
エラー内容を確認してみると"property 'latitude' of undefined"とあり、gon.posts[i].spotにうまく位置情報が渡せていないことが原因と思われます。

行ったこと
0. 番号リストgon.posts[i].spot.latitude, gon.posts[i].spot.longitudeの値を具体的な緯度、経度の数字（渋谷スクランブル交差点　lat: 35.6594666, lng: 139.7005536）に直したところ、ピンは正常に渋谷スクランブル交差点に表示された。
0. 番号リストコントローラーで@post = Post.first、　gon.lat = @post.spot.latitude、 gon.lng = @post.spot.latitudeを定義しjavascriptのmarkerLatLngに挿入したところ、一件目の投稿に関するピンは正常に表示された。
0. 番号リストrailsコンソールで@posts = Post.allと定義し、@post[0].spot.latitudeと打ったところ、一件目の緯度情報が得られた。

以上のことからgon.posts=@postsで上手くgon.postsに情報を渡せていない or javascriptファイルにて情報を取り出す方法に問題があると考えております
どこが問題か、どこを修正するべきか、ご意見をいただけますと幸いです。
よろしくお願いいたします。

Answer 1

いろいろいじくっていましたら解決いたしました。
参考までにコードを記載しておきます。

for (var i = 0; i < markerData.length; i++) {
        let id = markerData[i]['id']
        markerLatLng = new google.maps.LatLng({
          lat: markerData[i].latitude,
          lng: markerData[i].longitude
        });
        marker[i] = new google.maps.Marker({
          position: markerLatLng,
          map: map
        });
      }