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

Question

Using Google Maps API v3, how do I pro grammatically 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.

See the live example

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. Alternatively, you can also call it with a MarkerImage object.

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

The GMaps Utility Library has a plugin called MapIconMaker that makes it easy to generate different marker styles on the fly. It uses Google Charts to draw the markers.

There's a good demo here that shows what kind of markers you can make with it.