-1

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.

thanksd
  • 54,176
  • 22
  • 157
  • 150
Visual Guide
  • 25
  • 1
  • 5
  • Not sure if this would work but set all markers to icon1, then on mouse over/out change icon1 variable to different images and apply to markers. – Alex Dec 15 '15 at 19:57
  • thanks Alex, I already set the amm to icon1..it only works for 1 marker – Visual Guide Dec 15 '15 at 20:00
  • Can you create a fiddle of this? – Alex Dec 15 '15 at 20:02
  • I am new to this site, I don't know how to do it..:( – Visual Guide Dec 15 '15 at 20:03
  • possible duplicate of [Change icon on mouseover/out fails](http://stackoverflow.com/questions/23119744/change-icon-on-mouseover-out-fails), you have function closure for your 'mouseover' listener, but not for the 'mouseout' listener. – geocodezip Dec 15 '15 at 20:04
  • hi, I tired to implement the code suggested on the possible duplicate but it returned blank page – Visual Guide Dec 15 '15 at 20:18

1 Answers1

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>
geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • thank you geocodezip, it worked. now I am thoroughly looking tat the rest of my code with zoom_changed to see where did n'yt I close the loop.I appreciate you fantastic help – Visual Guide Dec 15 '15 at 20:44
  • If this answer worked for you, please [accept it](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – geocodezip Dec 15 '15 at 21:17