javascript - how to change marker on mouseover and back?

Question

I have checked all the answers on the stackoverflow but here is my little problem:

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.

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 < 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);
});

No matter what I do I can't change each of the markers back to the original imageicon.

Answer 1

You don't have a valid function closure for your 'mouseout' listener.

  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,
      // visible: false,
      icon: icon1
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        marker.setIcon(icon2);
      }
    })(marker, i));
    markers.push(marker); // save all markers

    // fixed version, changed to be similiar to the 'mouseover' listener
    google.maps.event.addListener(marker, 'mouseout', (function(marker) {
      return function(evt) {
        infowindow.close();
        marker.setIcon(icon1);
      }
    })(marker));
  }

proof of concept fiddle

code snippet:

var map;

function initialize() {
  var mapOptions = {
    zoom: 7,
    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);

  //announce my variables
  var icon1 = "http://maps.google.com/mapfiles/ms/micons/blue.png";
  var icon2 = "http://maps.google.com/mapfiles/ms/micons/green.png";


  var markers = [];
  var marker, i;

  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,
      // visible: false,
      icon: icon1
    });

    google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
      return function(evt) {
        infowindow.setContent(locations[i][0] + "<br>" + marker.getPosition().toUrlValue(6));
        infowindow.open(map, marker);
        marker.setIcon(icon2);
      }
    })(marker, i));
    markers.push(marker); // save all markers

    google.maps.event.addListener(marker, 'mouseout', (function(marker) {
      return function(evt) {
        infowindow.close();
        marker.setIcon(icon1);
      }
    })(marker));
  }
}
google.maps.event.addDomListener(window, 'load', initialize);
// 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();

html,
body,
#map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}

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