Adding eventlistener to javascript array

function initMap() {
  var map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    // zoom in on current location if available (not done yet...)
    center: new google.maps.LatLng(5, 5)
  });

  var markers = [
    // put all markers in a markers array
    // @foreach ($markers as $marker)
    // New York, NY, USA (40.7127837, -74.00594130000002)
    new google.maps.Marker({
      position: {
        lat: 40.7127837,
        lng: -74.0059413
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "New York, NY, USA"
      })
    }),
    // Newark, NJ, USA (40.735657, -74.1723667)
    new google.maps.Marker({
      position: {
        lat: 40.735657,
        lng: -74.1723667
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Newark, NJ, USA"
      })
    }),
    //  Baltimore, MD, USA (39.2903848, -76.61218930000001)
    new google.maps.Marker({
      position: {
        lat: 39.2903848,
        lng: -76.6121893
      },
      // infowindow for each marker with its name
      name: new google.maps.InfoWindow({
        content: "Baltimore, MD, USA"
      })
    }),
    //    @endforeach
  ];
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < markers.length; i++) {
    // add eventlistener for the infowindow we added earlier
    google.maps.event.addListener(markers[i], 'click', function() {
      this.name.open(map, this);
    });
    // add marker to map
    markers[i].setMap(map);
    bounds.extend(markers[i].getPosition());
  }
  map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initMap);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>