Get DOM Element Of A Marker In Google Maps API 3

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 thi

Solution 1:

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 + "']")

Solution 2:

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.

Solution 3:

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.

Solution 4:

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.

Solution 5:

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