google maps api v3 - targeting markers

Question

I set my markers like this

var
  marker,
  i,
  markers = [];

for (i = 0; i < locations.length; i++) {
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: 'img/markers/t1.png',
    id: locations[i][3]
  });

  markers.push(marker);

  marker.addListener('mouseover', function() {

    marker.setIcon("img/serve-bracket.png");
  });
}

This only seems to attach the event handler on the last one. How do I add it to all markers

Answer 1

You need to wrap your addListener in a closure.

var marker, i;
var markers = [];

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        icon: 'img/markers/t1.png',
        id: locations[i][3]
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
        return function() {
            marker.setIcon("img/serve-bracket.png");
        }
    })(marker, i));

    markers.push(marker);
}