GoogleマップマーカーのHTML DOM要素を取得するにはどうすればよいですか？

Question

GMarker JS変数を指定すると、それを表すHTML DOM要素はどのようにして取得できますか？私はこれが必要なので、私は<div>を自分の地図に正しいz-indexで挿入することができます。

ありがとうございました。

Answer 1

Google Maps APIはマーカーのDOM要素を返すメソッドを提供していないようです。

独自のカスタムマーカーを作成したいだけですか？その場合は、GOverlayを拡張するマーカークラスを作成できます。 MarkerLightは、これを達成する方法の素晴らしい例です（ここではexample pageです）。

カスタムアイコンが必要な場合は、hereの方法があります。

Answer 2

このような古い質問に投稿して申し訳ありませんが、私はちょうどこれを自分自身に遭遇しました。 Google Maps APIv3で使用したソリューションは、「カスタムマーカー」をthe Google Maps samplesからコピーし、マーカーの構成で生成されたdivを返す簡単なメソッドgetDOMElementを追加することでした。あなたはその後、動的にあなたのマーカーのスタイルを変更するためにmarker.getDOMElement().styleを使用することができ、かつmarker.getDOMElement()のimg子要素が使用されるアイコンですので、あなたも動的に変更することができ

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

。

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

〜