title: how to change marker on mouseover and back?
body: <p>I have checked all the answers on the stackoverflow but here is my little problem:</p>
  
  <p>I would like to change the image icon of the marker from original  icon1 to the new  icon2, apparently it only works on 1 marker but not on the rest.</p>
  
  <pre><code>var map;
  
  function toggleLayer(firLayer,id)
  {
    if ($('#'+id).is(':checked'))
      firLayer.setMap(map);
    else
      firLayer.setMap(null);
  }
  
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(40.222869, 47.602673),
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      zIndex: 3
  };
  
  // Set map    
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  // adding to add markers
  var locations = [
    ['Location1', 39.031586, 46.590031, 5],
    ['Location2', 38.998439, 46.557591, 4],
    ['Location3', 38.913429, 46.547370, 3],
    ['Location4', 39.090245, 46.703794, 2],
    ['Location5', 39.130588, 46.696239, 1]
  ];
  // adding infowindow
  var infowindow = new google.maps.InfoWindow();
  
  //announce my variables
  var icon1 ="circle.png";
  var icon2 ="circleblack.png";
  
  var markers = [];
  var marker, i;
  
  for (i = 0; i &lt; locations.length; i++) {  
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(locations[i][1], locations[i][2]),
      map: map,
      visible: false,
      icon: icon1
    });
  }
  
  google.maps.event.addListener(marker, 'mouseover', (function(marker, i)
  {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
      marker.setIcon(icon2);
    }
  })(marker, i));
  markers.push(marker); // save all markers
  
  google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow.close();
    marker.setIcon(icon1);
  });
  </code></pre>
  
  <p>No matter what I do I can't change each of the markers back to the original imageicon.</p>