Javascript – Google Maps API v3: How to dynamically change the marker icon


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

Best Solution

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.