1

I have seen their are several such type of question already asked according to those answers one more new issue is raised,

I have shown multiple markers on map, now I need if I hover to specific marker then icon get changed and when I remove my cursor from the marker then set previous icon, below is my code

for (i = 0; i < Object.size(locations); i++) { 
      marker = new google.maps.Marker({
        position : new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon     : site_url+'/assets/front/images/'+locations[i][4],
        map      : map,
        url      : site_url+'/detail/'+locations[i][3],
        draggable: false,
        hovericon: site_url+'/assets/front/images/'+hovericon,
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = this.url;
      });
      google.maps.event.addListener(marker, "mouseover", function() {
           marker.setIcon(this.hovericon);
      });
      google.maps.event.addListener(marker, "mouseout", function() {
         marker.setIcon(this.icon);
      });
      markers.push(marker);

    function AutoCenter() {
      var bounds = new google.maps.LatLngBounds();
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      map.fitBounds(bounds);
    }
    AutoCenter();
  }

Above code is showing multiple markers that is good but when I hover to specific marker then it changing always last marker icon, but I need that icon should be changed only which I hover not the last one.

enter image description here

If I hover to any marker always last icon get changed see in attached image If I hover to first, second last icon is changing.

What I am doing wrong, any help ?

duncan
  • 31,401
  • 13
  • 78
  • 99
Amit Sharma
  • 192
  • 2
  • 9
  • related question: [Google Maps Mouseout only applied to last infowindow](http://stackoverflow.com/questions/27388445/google-maps-mouseout-only-applied-to-last-infowindow) – geocodezip Aug 04 '16 at 10:23
  • duplicate of: [how to change marker on mouseover and back?](http://stackoverflow.com/questions/34297987/how-to-change-marker-on-mouseover-and-back) – geocodezip Aug 04 '16 at 10:25
  • duplicate of [dynamic icon change for markers google maps](http://stackoverflow.com/questions/34800259/dynamic-icon-change-for-markers-google-maps) – geocodezip Aug 04 '16 at 10:28

1 Answers1

2

this happend because when the for ends you have the last marker to change attached to the listener.

You can use this insetead of marker inside the addListeners to get the intended one.

for (i = 0; i < Object.size(locations); i++) { 
      marker = new google.maps.Marker({
        position : new google.maps.LatLng(locations[i][1], locations[i][2]),
        icon     : site_url+'/assets/front/images/'+locations[i][4],
        map      : map,
        url      : site_url+'/detail/'+locations[i][3],
        draggable: false,
        originalicon: site_url+'/assets/front/images/'+locations[i][4],
        hovericon: site_url+'/assets/front/images/'+hovericon
      });
      google.maps.event.addListener(marker, 'click', function() {
          window.location.href = this.url;
      });
      google.maps.event.addListener(marker, "mouseover", function() {
           this.setIcon(this.hovericon);
      });
      google.maps.event.addListener(marker, "mouseout", function() {
           //you have to retreive the original icon cause with the mouse hover you change the marker icon attribute
           this.setIcon(this.originalicon);
      });
      markers.push(marker);

    function AutoCenter() {
      var bounds = new google.maps.LatLngBounds();
      $.each(markers, function (index, marker) {
      bounds.extend(marker.position);
      });
      map.fitBounds(bounds);
    }
    AutoCenter();
  }

This way you refer the element that you are interacting with(mouseover and mouseout) and not the last one in the for loop.

I didn't tested the code so I'm not sure is working.

look at this fiddle for working sample

hope this helps

rick
  • 1,869
  • 13
  • 22
  • this code On-hover it changed the correct icon but not set the previous icon when I mouse out from the marker anything more to do ? – Amit Sharma Aug 04 '16 at 09:22
  • Strange,have you tryed to debug a little? something like console.log(this.icon) inside the mouseout – rick Aug 04 '16 at 09:25
  • Yes that I do mouse-out event is calling but is not able to set again original icon – Amit Sharma Aug 04 '16 at 09:26
  • I found a fiddle and modified it. http://jsfiddle.net/63qdhqgy/ seems working here – rick Aug 04 '16 at 09:34
  • Ok I reproduced your problem give me a minute – rick Aug 04 '16 at 09:58
  • you can't revert back to icon using this.setIcon(this.icon) because the jou just canged the icon attribute so using this.icon you are retreiving the actual one. I modify the answere – rick Aug 04 '16 at 10:00
  • this one -> http://jsfiddle.net/ap2f2zat/ is working , sorry I don't get your problem before – rick Aug 04 '16 at 10:02
  • that's okay and sorry for my let reply that function is working if I use this like this.setIcon(this.icon); it would not work but when I use this like this this.setIcon('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzBNkwyLxYQdFWawEwuIhXx-FmDxgIghgTgeCRnteeCP8FElJ7-g'); then it work – Amit Sharma Aug 04 '16 at 11:18
  • do you have any idea why – Amit Sharma Aug 04 '16 at 11:18
  • Is what I wrote in the previous comments. I'll try another way :) icon is an attribute of the marker, when you do setIcon you change the value of the icon attribute of the marker. So when you try to get the value with this.icon you take the attribute that you just setted at the new value. If you create a new attribute originalicon(as you can find in my answere) that custom attribute dosen't change and you can use it to revert the value to the original icon. Take a look at the code in the answere, I modified it – rick Aug 04 '16 at 11:22
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/120108/discussion-between-amit-sharma-and-rick). – Amit Sharma Aug 04 '16 at 11:24