javascriptの繰り返し処理

前提・実現したいこと

ruby on railsのアプリにおいて、Google Maps APIを使用し、マップと、マップ上に複数のマーカー表示しています。
マップ上のマーカーをクリックすると、それぞれのマーカーに該当するshow.html.slimページにリンクする仕様にしたいと考えています。

発生している問題

問題箇所

// マーカーのクリックイベント
marker.addListener('click', function(){
  console.log(damages);
  console.log(damages[i]);
});

リンクする仕様を実装する前段階で、クリックイベント内の挙動を確認しながら進めているのですが、
console.log(damages);の出力は、意図したarray（その中にハッシュ）であるものの、
console.log(damages[i]);の出力は、undefinedとなります。
すなわち、この部分の繰り返し処理がうまくできていないと認識しているのですが、この書き方でなぜ上手くいかないのかがわかりませんでした。
どのように改善すべきかご教示頂けますと幸いです。

該当のソースコード

index.html.slim

.page-title 被害一覧

= link_to '被害の新規登録', new_damage_path, class: 'btn btn-primary'

table.table.table-hover.index-table
  thead.thead-light
    tr
      th = Damage.human_attribute_name(:title)
      th = Damage.human_attribute_name(:place)
      th = Damage.human_attribute_name(:amount)
      th = User.human_attribute_name(:department)
      th = User.human_attribute_name(:name)
      th
    tbody
      - @damages.each do |damage|
        tr
          td = link_to damage.title, damage_path(damage), class: 'damage-title'
          td = damage.place
          td = damage.amount&.to_s(:delimited)
          td = damage.user.department
          td = damage.user.name
          - if damage.user_id == current_user.id
            td = link_to '編集', edit_damage_path(damage), class: 'btn btn-primary'
          - else
            td =
      tr
        td = "合計"
        td = "#{@total_place}箇所"
        td = @total_amount.to_s(:delimited)
        td =
        td =
        td =




#map.mb-5
javascript:
  // APIライブラリの読み込みが終わったら実行する関数を指定
  function initMap() {
    // javascriptうちでは - @damages.each do |damage| という方法は使用不可のため、JSONに変換
    var damages = #{raw @damages.to_json};
    // idがmapのdiv要素オブジェクトを取得
    var target = document.getElementById('map');
    // 中央に表示する座標
    var center = {lat: 38.698953,lng: 139.925736}

    // マップを描画
    map = new google.maps.Map(
      // 描画する領域のオブジェクトを指定
      target, {
      // 描画に関するオプション
      center: center,
      zoom: 13
    });

    var marker, i;
    for (i = 0; i < damages.length; i++) {

      // マーカーを表示
      marker = new google.maps.Marker({
        // 表示オプション
        position: new google.maps.LatLng(damages[i].latitude, damages[i].longitude),
        map: map,
        title: damages[i].title,
        icon: ( damages[i].description.indexOf('現地確認未了') == -1 ) ? "http://maps.google.com/mapfiles/ms/micons/red-dot.png" : "http://maps.google.com/mapfiles/ms/micons/blue-dot.png"
      });

      // マーカーのクリックイベント
      marker.addListener('click', function(){
        console.log(damages);
        console.log(damages[i]);
      });

   }

  }

script async="" defer="defer" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDD8_DF2AUAtXfZVcQYFUi3T3AslQKAXaw&callback=initMap"