Reputation: 17617
I'm trying to find a way to get the DOM element of a marker. It seems that Google uses different elements for showing a marker and one of handling the event.
I've figured out 2 things so far.
There's a generated variable called fb
that holds the DOM element on a marker object, but I think the next time Google updates the API, it will be named something different. So no go.
Second, if one attach a click event to a marker the API send the event DOM element as arguments to what ever function you have specified. While looking through it in Firebug I can't find any relations between the two.
What I'm trying to accomplish is to manipulate the DOM element() and feed it more information then just a 'div' element with a background.
I've done this in version 2 using a name property(undocumented) that generates an id on the div element.
Does anyone have an idea?
Upvotes: 25
Views: 24509
Reputation: 1266
I have checked that google maps marker click event has a MosueEvent property in it and the target of the mouse event is the dom element of the marker.
It worked for me until i found out that the property name has changed from tb to rb. I did not know why and I could not find an explaination for that in the google maps api docs but I have created a work around.
I check the click event object properties for the one which is an instance of MouseEvent and I use its target as the marker dom element.
marker.addListener('click', (e) => {
let markerElement;
// with underscore
_.toArray(markerClickEvent).some(item => {
if (item instanceof MouseEvent) {
markerElement = item.target;
return true;
}
});
// or maybe with for loop
for (let key in markerClickEvent) {
if (markerClickEvent.hasOwnProperty(key) && markerClickEvent[key] instanceof MouseEvent) {
markerElement = markerClickEvent[key].target;
break;
}
}
});
Upvotes: 1
Reputation: 51
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.
Upvotes: 5
Reputation: 381
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 + "']")
Upvotes: 19
Reputation: 21
gmnoprint
and the index it has been appended in.Upvotes: 2
Reputation: 17617
I found a really really bad workaround. One can use the title attribute to pass a id property.
fixMarkerId = function () {
$('div[title^="mtg_"]').each(function (index, elem) {
el = $(elem);
el.attr('id', el.attr('title'));
el.removeAttr('title');
});
},
tryAgainFixMarkerId = function () {
if ($('div[title^="mtg_"]').length) {
fixMarkerId();
} else {
setTimeout(function () {
tryAgainFixMarkerId();
}, 100);
};
}
if ($('div[title^="mtg_"]').length) {
fixMarkerId();
} else {
setTimeout(function () {
tryAgainFixMarkerId();
}, 100);
};
I would strongly not recommend this solution for any production environment. But for now I use it so that I can keep developing. But still looking for a better solution.
Upvotes: 4