Change icon on mouseover/out fails

Question

I'm tearing my hair out over this code. As you may guess, I'm relatively new to coding. I would appreciate any insight you have into why it is not working.

I am trying to change marker icons on mouseover/out. I am trying to create and add listeners in a for-loop. In the loop, the markers are created from an array of locations and pushed to another array, a listener is added for mouseover events to change the icon, and another listener is added for mouseout events to nullify the marker icon. The code below displays the map, adds the markers and seems to listen for mouseover and mouseout events (the cursor changes when hovering over a marker), but the icon does not change at these events.

    function initialize(){  
        //Marker locations
        var NYC = new google.maps.LatLng(40.721505, -74.004783);
        var LA = new google.maps.LatLng(34.049519, -118.238698);
        var Chicago = new google.maps.LatLng(41.877461, -87.624352);
        var Seattle = new google.maps.LatLng(47.606747, -122.330349);
        var Miami = new google.maps.LatLng(25.788661, -80.226617);
        var Boston = new google.maps.LatLng(42.357913, -71.059217);
        var Houston = new google.maps.LatLng(29.758182, -95.364213);
        var KansasCity = new google.maps.LatLng(39.097781,-94.588079);
        var locations = new Array(NYC, LA, Chicago, Seattle, Miami, Boston, Houston, KansasCity);

        //Array to store markers
        var markers = new Array ();

        //Icon
        var gif = 'http://demers-ambulances.com/assets/img/news/mapPinOver2.gif';

        //Map options
        var mapOptions = {
            center: KansasCity,
            zoom: 5,
            zoomControl: true,
            zoomControlOptions: {
                style: google.maps.ZoomControlStyle.SMALL,
                position: google.maps.ControlPosition.TOP_LEFT
            },
            mapTypeControl: true,
            mapTypeControlOptions: {
                style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
                position: google.maps.ControlPosition.TOP_RIGHT,
            },
        };

        //Create map
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); 

        //Create markers and add listener to change marker icon on mouseover/out
        for (i = 0; i<locations.length; i++){
            var marker = new google.maps.Marker({
                position: locations[i],
                draggable: true,                
                map: map,
            });
            markers.push(marker);               
            google.maps.event.addListener(markers[i], 'mouseover', function() {
                markers[i].setIcon(gif);
            });
            google.maps.event.addListener(markers[i], 'mouseout', function() {
                markers[i].setIcon(null);
            });         
        };          
    };

    google.maps.event.addDomListener(window, 'load', initialize);

Thanks for your help :)

Answer 1

Closure problem: there is error reported:

Uncaught TypeError: Cannot read property 'setIcon' of undefined

Code has to be changed to:

        (function(i) {
            google.maps.event.addListener(markers[i], 'mouseover', function() {
                markers[i].setIcon(gif);
            });

            google.maps.event.addListener(markers[i], 'mouseout', function() {
                markers[i].setIcon(null);
            });         
        })(i);