Using the google maps API (v3) I can successfully add an array of markers to the map using custom icons.

Each marker represents a destination and I want to change the icon image when the respective destination name is mouse'd over elsewhere on the page.

I can add the event listener to pick up the mouse over, and I know I can use marker.setIcon("imgurl") to change the icon, however what I can't figure out is how to reference the specific marker to be changed?

I've read that I can add an "id" when defining the marker, however I can't figure out how to use this is conjunction with marker.seticon to update that specific marker.

Thanks for your help.

Using the google maps API (v3) I can successfully add an array of markers to the map using custom icons.

Each marker represents a destination and I want to change the icon image when the respective destination name is mouse'd over elsewhere on the page.

I can add the event listener to pick up the mouse over, and I know I can use marker.setIcon("imgurl") to change the icon, however what I can't figure out is how to reference the specific marker to be changed?

I've read that I can add an "id" when defining the marker, however I can't figure out how to use this is conjunction with marker.seticon to update that specific marker.

Thanks for your help.

• javascript
• google-maps-api-3

2 Answers 2

If you have ID numbers for each destination, keep an array of the markers indexed by your destination.

For example,

var myMarkers = []
for(var i = 0; i < destinations.length; i++) {
  myMarkers[destination[i].id] = new google.maps.Marker(markerOpts)
}

and in your destination links elsewhere:

onclick = function() {
    myMarkers[destinationID].setIcon(otherIcon)
}

I typically create an array called markersArray. Then I name each marker marker_1, marker_2, etc. using a for loop. After each one is created, I push it to the markersArray. Now you can reference each marker using markersArray[i].