Google Maps API v3: How do I dynamically change the marker icon?

Question

Using Google Maps API v3, how do I programmatically change the marker icon?

What I would like to do is, when someone hovers over a link - to have the corresponding marker icon on the map change colors to denote the marker in question.

Essentially, the same function as what Roost does.

When you hover over a home listing on the left, the corresponding marker on the right changes color

Answer 1

Call the marker.setIcon('newImage.png')... Look here for the docs.

Are you asking about the actual way to do it? You could just create each div, and a add a mouseover and mouseout listener that would change the icon and back for the markers.

Answer 2

You can also use a circle as a marker icon, for example:

var oMarker = new google.maps.Marker({     position: latLng,     sName: "Marker Name",     map: map,     icon: {         path: google.maps.SymbolPath.CIRCLE,         scale: 8.5,         fillColor: "#F00",         fillOpacity: 0.4,         strokeWeight: 0.4     }, }); 

and then, if you want to change the marker dynamically (like on mouseover), you can, for example:

oMarker.setIcon({             path: google.maps.SymbolPath.CIRCLE,             scale: 10,             fillColor: "#00F",             fillOpacity: 0.8,             strokeWeight: 1         })