rails googlemap クリックしたオブジェクト毎のピンに移動したい

Question

前提・実現したいこと

railsでテニスコート検索アプリを作成中です。
コート情報の配列である@courtsオブジェクトをeach doを使ってそれぞれ表示させてます。
表示させたコート情報をクリックした時にそのコートのピンに移動させたいです。
コート情報を一覧で表示して、マップにピンを表示させるまでは実装できました。

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

現状のコードだと最後に読み込まれた緯度経度をもとにPantoが作動してしまいます。
コート一覧でクリックしたコートオブジェクトの緯度経度を取得してPantoしたいです。

該当のソースコード

#index.html.erb
            <% @courts.each do |court|%>
              <div class="index">
                <div class="court-info">
                  <p class="txtm">コート名：<%=court.name %></p>
                  <p class="txtm">住所：<%=court.address %></p>
                  <input class="lat" name="latlng" type="hidden" value="<%= court.latitude %>"></input>
                  <input class="lng" name="latlng" type="hidden" value="<%= court.longitude %>"></input>
                </div>
              </div>
            <%end%>

            <script>
              var map;
              var marker = [];
              var infoWindow = [];
              var test = <%= @courts_m.to_json.html_safe %>;

                var mapLatLng = new google.maps.LatLng({lat: test[0]['latitude'], lng: test[0]['longitude']}); // 緯度経度のデータ作成

                map = new google.maps.Map(document.getElementById('sample'), { // #sampleに地図を埋め込む
                  center: mapLatLng, // 地図の中心を指定
                  zoom: 10 // 地図のズームを指定
                });

                // マーカー毎の処理
                for (var i = 0; i < test.length; i++) {
                  markerLatLng = new google.maps.LatLng({lat: test[i]['latitude'], lng: test[i]['longitude']}); // 緯度経度のデータ作成
                  marker[i] = new google.maps.Marker({ // マーカーの追加
                    position: markerLatLng, // マーカーを立てる位置を指定
                    map: map // マーカーを立てる地図を指定
                  });
                 
                  infoWindow[i] = new google.maps.InfoWindow({ // 吹き出しの追加
                    content: '<div class="sample">' + test[i]['name'] + '</div>' // 吹き出しに表示する内容
                  });
                 
                  markerEvent(i); // マーカーにクリックイベントを追加
                }

                // マーカーにクリックイベントを追加
                function markerEvent(i) {
                  marker[i].addListener('click', function() { // マーカーをクリックしたとき
                    infoWindow[i].open(map, marker[i]); // 吹き出しの表示
                  });
                }

                $('.court-info').on('click', function() {
                  lat = $('.lat').val();
                  lng = $('.lng').val();
                  toTokyo(lat,lng);
                });

                function toTokyo(lat,lng) {
                  map.panTo(new google.maps.LatLng(lat,lng));
                }

            </script>

試したこと

コード記載のように、inputタグをhiddenにすることで変数を置いてますが、これだとどのコートをクリックしても最後のコートに移動してしまいます。

Answer 1

$( '.court-info' ).on( 'click', function() {
  toTokyo( $( '.lat', this ).val(), $( '.lng', this ).val());
} );

Comments

[退会済みユーザー]

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

```
$('li.court-info').on('click',function(){
var index = $('li.court-info').index(this);

lat = test[index]['latitude']
lng = test[index]['longitude']

move(lat,lng);
});
```
とすることで解決しました。