title: Change icon on mouseover/out fails
body: <p>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. </p>
  
  <p>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. </p>
  
  <pre><code>    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&lt;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);
  </code></pre>
  
  <p>Thanks for your help :)</p>