Changing markers icons in Google Maps application

UPDATE 2007-4-22
Starting from API version 2.75 there is method setImage() for objects of GMarker class to change image. Check a little HOWTO about setImage.

For Run-N-Share I was using custom images for markers icons.

Redefinition of markers icons is quite easy and straightforward, but there is one issue around this topic. There is no other way to change icon of existing marker than removing and adding new mark. Let’s check it how to do it, I will show it on highlighting example from RNS:

First we have to prepare some two icons for normal marker and highlighted one:

var cIcon = new GIcon();
cIcon.image = '/images/runner.png'
cIcon.iconSize = new GSize(32,22)
cIcon.iconAnchor = new GPoint(16,11)

var hIcon = new GIcon();
hIcon.image = '/images/runner_y.png'
hIcon.iconSize = new GSize(32,22)
hIcon.iconAnchor = new GPoint(16,11)

Nothing special here, it is just taken form Google Maps API documentation. Now we have to store in two arrays points (GPoint) where all markers are and array with corresponding markers (GMarker). What for? Coordinates will be needed to generate new, highlighted marker, but first we have to remove old one, so we have store markers itself.

This is some overhead with this GPoints, but… there is no way (at least known me) to get markers coordinates in current viewport (marker’s GPoint for current view). new GPoint(marker.getPoint()) should work, but I ran on strange issues, from errors in JS to wrong icon placing, dependenig on client browser, so I will stay with two arrays, until I figure out what I’m doing wrong.

So to change icon we would came with following function:

function outlineMark(number, icon){
  if ( runMarkers[number] ) {
    map.removeOverlay(runMarkers[number])
    runMarkers[number] = new GMarker (runPoints[number], icon)
    map.addOverlay(runMarkers[number])
}

runPoints keeps GPoint coordinates for GMarkers in runMarkers. If You will do this, remeber that coordinates in GPoint are relative to current view, so when user zooms map or moves they have to be recalculated.

So, we can highlight marker 46 with outlineMark(46, hIcon) and return to normal state with outlineMark(46, cIcon).

This is real code from RNS, so You have to populate runMarkers and runPoints by hand, Google Maps API doesn’t do it for You.

Changing icons through removing/adding new ones would be not such pain if here we could stop. Unfortunatley, if there are some event listeners associated with changed markers, they are removed when You remove marker. That mean You have to add them again once You have created new marker. In my case, events are listeners identical for all markers, so I could just add them again in outlineMark function.