change marker icon on mouseover ( google maps V3 )

Question

var image = 'bullets/_st_zzzzzzl SSS.gif';  var bar1 = new google.maps.Marker({     position: myLatLng,      map: map,     icon: image,     title: "bar number 1"        });       google.maps.event.addListener(bar1, 'mouseover', function() {         infowindow.open(map,bar1);     });      google.maps.event.addListener(bar1, 'mouseout', function() {         infowindow.close(map,bar1);     }); 

Now when im on mouseover i want the icon to change to another image i got. i tried some tips and some code but nothing works... Appreciate ur help

Answer 1

Use marker.setIcon() function. The rest is almost the same as opening/closing infowindow in your code:

var icon1 = "imageA.png"; var icon2 = "imageB.png";  var marker = new google.maps.Marker({     position: myLatLng,     map: map,     icon: icon1,     title: "some marker" });  google.maps.event.addListener(marker, 'mouseover', function() {     marker.setIcon(icon2); }); google.maps.event.addListener(marker, 'mouseout', function() {     marker.setIcon(icon1); }); 

Note that besides using image paths in setIcon() function, you can also use google.maps.MarkerImage objects, which are very useful, especially if you want to use image sprites.