CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Amit Sharma
Amit Sharma

Reputation: 192

on-hover marker icons get change on google map

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 ?

Upvotes: 1

Views: 5756

Answers (1)

rick
rick

Reputation: 1895

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

Upvotes: 2

Related Questions