如何获取Google Maps标记的HTML DOM元素？

Question

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.

Answer 1

Sorry to post on such an old question, but I've just come 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.

Answer 2

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 accomplish this (and here is the example page ).

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

Answer 3

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.com/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);
};

~