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\"             


        

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.

Answer 2

google.maps.event.addListener(marker, 'mouseover', function() {
    infowindow.open(map, this);
});

// assuming you also want to hide the infowindow when user mouses-out
google.maps.event.addListener(marker, 'mouseout', function() {
    infowindow.close();
});