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

javascript google-maps google-maps-api-3
TedK picture TedK · Dec 21, 2009 · Viewed 184.8k times · Source

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

Sudhir Jonathan picture Sudhir Jonathan · Dec 21, 2009

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.

Related questions

Google Maps JS API v3 - Simple Multiple Marker Example

Fairly new to the Google Maps Api. I've got an array of data that I want to cycle through and plot on a map. Seems fairly simple, but all the multi-marker tutorials I have found are quite complex. Let's use …

Read More
Google Maps API v3: How to remove all markers?

In Google Maps API v2, if I wanted to remove all the map markers, I could simply do: map.clearOverlays(); How do I do this in Google Maps API v3? Looking at the Reference API, it's unclear to me.

Read More
Google Map API v3 — set bounds and center

I've recently switched to Google Maps API V3. I'm working of a simple example which plots markers from an array, however I do not know how to center and zoom automatically with respect to the markers. I've searched the net …

Read More