Get DOM Element of a marker in Google Maps API 3

user_183893 0
Viewed 22779

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?

google-maps dom javascript
5 Answers

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.

user_1838930

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;
        }
    }
});
user_50121270
Related