Given a GMarker JS variable, how do I obtain the HTML DOM element that represents it? I need this so I can insert a <div> of my own into the map with the correct z-index.

Thanks.

Given a GMarker JS variable, how do I obtain the HTML DOM element that represents it? I need this so I can insert a <div> of my own into the map with the correct z-index.

Thanks.

• javascript
• dom
• google-maps

• Possible duplicate of: stackoverflow./questions/2065485/… – Simon E. Commented Sep 11, 2015 at 0:46

3 Answers 3

Sorry to post on such an old question, but I've just e across this myself. The solution I used in Google Maps APIv3 was to copy the "Custom Marker" from the Google Maps samples and add a simple method getDOMElement, which returns the div generated in the Marker's construction.

CustomMarker.prototype.getDOMElement = function() {
  return this.div_;
}

You can then use marker.getDOMElement().style to dynamically change the styling of your marker, and the img child element of marker.getDOMElement() is the icon used, so you can change that dynamically too.

It looks like the Google Maps API doesn't provide a method to return a marker's DOM element.

Do you just want to create your own custom marker? If so, you can create a marker class which extends GOverlay. MarkerLight is a great example of how to acplish this (and here is the example page).

If all you need is a custom icon, here is how to do that.

This a simpler CustomMarker I'm using. Just provide a DOM element to it and it will be used as marker!

// based on http://gmaps-samples-v3.googlecode./svn/trunk/overlayview/custommarker.html

function CustomMarker(options) {
  this.options = options;
  this.element = options.element;
  this.map = options.map;
  this.position = options.position;
  this.positionFunction = options.positionFunction || function () {
    var point = this.getProjection().fromLatLngToDivPixel(this.position);
    if (point) {
      this.element.style.position = 'absolute';
      this.element.style.left = (point.x - jQuery(this.element).width()/2) + 'px';
      this.element.style.top = (point.y - jQuery(this.element).height()) + 'px';
      this.element.style.cursor = 'pointer';
    }
  };

  this.setMap(this.map);
}

CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
  if (!this.div_)
    this.getPanes().overlayImage.appendChild(this.element);
  this.positionFunction();
};
CustomMarker.prototype.getPosition = function() {
  return this.position;
};
CustomMarker.prototype.setVisible = function(bool) {
  jQuery(this.element).toggle(bool);
};

~