Add HTML class/ID to Google Maps Marker (API V3)

Question

Hello,

How can I add a class or ID to a Google Maps API V3 marker? I want to be able to access the markers using jQuery.

EDIT: Hi clarkf, thanks for the response. Using Firebug I'm not able to see those classes when inspecting my map but I did notice there are two divs. One for the icon and one for the button.

What I am trying to do is: I have a list of lost pets displayed on the site, they are also displayed on the map. Each pet in the list has a unique ID, and I want the ones on the map to mirror this ID using a class as ID's need to be unique and there might be several points per pet. So I'm looking for a way of adding a class to a map marker. This way when a user selects a lost pet from the list it'll highlight it on the map or vice-versa.

Thanks

Ric

Answer 1

After doing a bit of prodding, I discovered map markers all have the class of gmnoprint (assumed Google Maps No Print). So, I did a maps search for pizza near my house, and in a Chrome's Inspector's Console Window, I:

> var list = document.getElementsByClassName('gmnoprint');
  [...] //length=37
> for ( var i = 0, item; item = list[i]; i++ ) { console.log(item.id); }
  //(11 items with no id)
  mtgt_A.1001
  mtgt_B.1001
  mtgt_C.1001
  mtgt_D.1001
  mtgt_E.1001
  mtgt_F.1001
  mtgt_G.1001
  mtgt_H.1001
  mtgt_I.1001
  mtgt_J.1001
  mtgt_A.1000
  map_overview
  //Irrelevant information...

All of the visible markers were in the format of mtgt_[LETTER].1001. The numeral suffix seems to have something to do with multiple sets of lettered markers (mtgt_A.1000 was a hidden marker - maybe the place wasn't open, or something. But all pertinent markers followed that schema. So, presumably, you should be able to access the markers via jQuery with $('#mtgt_[LETTER].1001') - again, depending on your context, but maybe what you're looking for is

function getMarker(letter) {
    return $('mtgt_'+letter+'.1000');
}

Sort of ad-hoc-y, but I'm still not sure what you're getting at.