Question

I have a clickable marker that I want to attach either a ‘class’ or an ‘id’ tag to,
much the same way you would in <a href='' id='???'>.

<div id="map" style="width: 500px; height: 400px;"></div>
<script type="text/javascript">
var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 2,
  center: new google.maps.LatLng(35.55, -25.75),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  position: map.getCenter(),
  url: '#popup1',
  map: map
});

google.maps.event.addListener(marker, 'click', function() {
  window.location.hash = marker.url;
});

---

For those also wanting the answer: I found SimpleModal.

http://www.ericmmartin.com/projects/simplemodal/

I then used $(“#element-id”).modal(); on marker click event, which launches an external Jquery window.

Thanks for your time though, Loïc!

Answer 1

Perhaps you will be able to get the dom node following the suggestions made here:
Get DOM Element of a marker in Google Maps API 3

Still, accessing the dom node (in order to set the id and a css class) doesn’t seems to be the way the google map engineering team designed the marker. In fact, the marker is assigned an id by the google map api, i wouldn’t tamper with it as it may break functionality.

If what you want is to alter the visuals of the marker, you can use Icons, instead of markers. Icons are markers with a custom image. You can get more info here:
http://code.google.com/apis/maps/documentation/javascript/overlays.html#Icons

And if you want to get a hold on the marker itself you can store it on an array and access it later on your code.