GMAP API V3 のOverlayViewのtips

OverlayView を作ってもイベントを拾えない

こうすると良い。

FooBar.prototype.onAdd = function() {
  // Create a div and append it to a map pane. 
  var div = document.createElement('div');
  div.style = "height: 100px; width: 100px";
  this.getPanes().overlayLayer.appendChild(div);

  // Add a listener - we'll accept clicks anywhere on this div, but you may want
  // to validate the click i.e. verify it occurred in some portion of your overlay.
  var self = this;
  google.maps.event.addDomListener(div, 'click', function() {
    google.maps.event.trigger(self, 'click');
  });

  // Position your overlay etc.
}

※リンク先のコメントにも書いてある通り、動作しないコードが含まれているので少し改変して記載してあります。

http://stackoverflow.com/questions/3361823/make-custom-overl...

OverlayView を継承してOverlayを作るとイベントがmapまで到達してしまう問題

上の方法で、Overlayのイベントを捕まえた際に、DOMのメソッドを利用してイベントの伝播を止めることができるらしいです。

https://developer.mozilla.org/ja/DOM/event.stopPropagation

自分のコードはこんな感じになりました。

var self = this;
google.maps.event.addDomListener(
	div,
	'click',
	function(e){
		google.maps.event.trigger(self, 'click');
		var e = e || window.event; 
		e.cancelBubble = true;
		if (e.stopPropagation) e.stopPropagation();
	}
);

ちなみにコードはここのものを拝借しました。

Capture events in custom Overlays - Google Maps JavaScript API v3