Get DOM Element of a marker in Google Maps API 3
I've found this method to be useful, although it might not be suitable for all environments. When setting the marker image, add a unique anchor to the URL. For example:
// Create the icon
var icon = new google.maps.MarkerImage(
"data/ui/marker.png",
new google.maps.Size(64, 64),
new google.maps.Point(0,0),
new google.maps.Point(48, 32)
);
// Determine a unique id somehow, perhaps from your data
var markerId = Math.floor(Math.random() * 1000000);
icon.url += "#" + markerId;
// Set up options for the marker
var marker = new google.maps.Marker({
map: map,
optimized: false,
icon: icon,
id: markerId,
uniqueSrc: icon.url
});
Now you have a unique selector i.e.:
$("img[src='data/ui/marker.png#619299']")
or if you have the marker:
$("img[src='" + marker.uniqueSrc + "']")
I was looking for the DOM element too in order to implement a custom tooltip. After a while digging into google overlays, custom libraries and so on, i've ended up with the following solution based on fredrik's title approach (using jQuery) :
google.maps.event.addListener(marker, 'mouseover', function() {
if (!this.hovercardInitialized) {
var markerInDOM = $('div[title="' + this.title + '"]').get(0);
// do whatever you want with the DOM element
this.hovercardInitialized = true;
}
});
Hope this helps someone.