[ACCEPTED]-Get DOM Element of a marker in Google Maps API 3-dom

I've found this method to be useful, although 5 it might not be suitable for all environments. When 4 setting the marker image, add a unique anchor 3 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 2 unique selector i.e.:

$("img[src='data/ui/marker.png#619299']")

or if you have the 1 marker:

$("img[src='" + marker.uniqueSrc + "']")

I was looking for the DOM element too in 6 order to implement a custom tooltip. After 5 a while digging into google overlays, custom 4 libraries and so on, i've ended up with 3 the following solution based on fredrik's 2 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 1 helps someone.

I found a really really bad workaround. One 5 can use the title attribute to pass a id 4 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 3 this solution for any production environment. But 2 for now I use it so that I can keep developing. But 1 still looking for a better solution.

1. Customize overlays (by implements onAdd, draw, remove) while drag it has some issues.
2. Maybe you can get the marker dom element by the class name gmnoprint and the index it has been appended in.

0

I have checked that google maps marker click 11 event has a MosueEvent property in it and 10 the target of the mouse event is the dom 9 element of the marker.

It worked for me until 8 i found out that the property name has changed 7 from tb to rb. I did not know why and I 6 could not find an explaination for that 5 in the google maps api docs but I have created 4 a work around.

I check the click event object 3 properties for the one which is an instance 2 of MouseEvent and I use its target as the 1 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;
        }
    }
});