How to get HTML DOM element on Google Maps brand?

Question

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

Thanks.

Answer 1

It seems that the Google Maps API does not provide a method for returning a marker DOM element.

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

, , .

Answer 2

, , . , Google Maps APIv3, , " " Google getDOMElement, div, Marker.

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

marker.getDOMElement().style , img marker.getDOMElement() - , .

Answer 3

CustomMarker, . DOM, !

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

~