How get HTML element from Google maps marker (v3)?

<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; background-image: url(...); top: 62px; width: 70px; height: 70px; background-size:  ; left: 924px; z-index: 97; opacity: 0,01; cursor: pointer; background-position: 0px -420px; background-repeat: no-repeat no-repeat; " title=""></div>

Here is all markers map.getPanes().overlayImage; But I don't know which child is my marker...

How get HTML element from Google maps marker (v3)?

<div style="overflow-x: hidden; overflow-y: hidden; position: absolute; background-image: url(...); top: 62px; width: 70px; height: 70px; background-size:  ; left: 924px; z-index: 97; opacity: 0,01; cursor: pointer; background-position: 0px -420px; background-repeat: no-repeat no-repeat; " title=""></div>

Here is all markers map.getPanes().overlayImage; But I don't know which child is my marker...

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers

1 Answer 1

You could assign a unique ID to the title attribute of each marker, and then search all markers until you find one with that ID

for (var marker in map.getPanes().overlayImage.getElementsByTagName("div")) {
  if (marker.title == "some_id") return marker;
}

As a last resort, you could also use a server side script to generate unique IDs client side for each image. Your server would return the same image (your marker icon) regardless of the filename (i.e. mysite./marker/De4gy.png). You can then crawl the DOM looking for DIVs that contain that URL in their style attributes. Note that this could hurt performance, as markers will no longer be cachable.

Note that changes to the way in which markers are added to the DOM by the API will likely break all of the above.