カスタムオーバレイがクリックできない、という問題は最初からあって、解決していたのですが、いつの間にか再発生していました。
順を追って説明しますと、カスタムオーバレイというのは、普通のマーカーではなく
MyOverlay.prototype = new google.maps.OverlayView();
という感じで継承したオブジェクトを作って地図に貼り付けるものです。
これがクリックできない、イベント発生しない、という問題はよくあって、一番基本的なのは、そもそもClick等のイベントをonAddで実装してやらないと発生するわけがない、というのがあります。
MyOverlay.prototype.onAdd = function() {
//実際のDOMオブジェクトを作る
this._div = document.createElement( “div” );
var panes = this.getPanes();
panes.overlayLayer.appendChild( this._div );
//そこに発生したイベントを、MyOverlayとして知らせる
var self = this;
google.maps.event.addDomListener(
this._div,
‘click’,
function(e){
google.maps.event.trigger(self, ‘click’);
var e = e || window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
);
}
とかまぁ、そんな感じです（正確なコードではありません）。
この点は問題なく実装できていたのですが、それでもイベントが伝わらない、という事象がありました。
原因は、このオーバーレイの上に透明なdivがかぶさっていて、そいつがイベント横取りしているからでした。
というわけで、カスタムオーバーレイのz-indexを1000くらいにすることで、解決していたのでした。
ところが久しぶりに触ってみると、またクリックが発生しなくなっています。IEは動いてFireFoxとchromeがダメです（逆はよくあるのにw）。APIのバージョン指定しているのですが、マイナーチェンジで動かなくなったのでしょうか。よくわかりません。
とにかく原因を調べると、カスタムオーバレイ群が格納されているAPIの作ったdivの上に、別のdivが何枚か乗っていて、それが格納されているdivより高いz-indexを指定されています。
<div style="z-index:106">
<div>カスタムオーバレイ</div>
<div>カスタムオーバレイ</div>
<div>カスタムオーバレイ</div>
<div>カスタムオーバレイ</div>
</div>
<div style="z-index:107">
<div style="z-index:108">
みたいな感じです。
そこで、カスタムオーバレイの親を取って、そいつのz-indexをこれまた1000くらいにしてやることで解決しました。
ただし、カスタムオーバレイをセットする段階では、外側のdivは描画されていないようなので、描画完了のタイミング（tilesloaded）を待って変更してやる必要があります。
google.maps.event.addListener(mapObj, ‘tilesloaded’, function(){
if($(‘.letterMarker’).length>0){
var lm1=$(‘.myOverlay’).get(0);
$($(lm1).parent(‘div’).get(0)).css(‘zIndex’,1000);
}
});
みたいな感じです（カスタムオーバレイにmyOverlayクラスがついていて、jQueryを使っている場合）。
何だか原始的な方法ですが、気になるのは、当初は最後の方法がなくても動いていたのが、いつの間にかダメになっていたことです。バージョン指定していてもダメなのでしょうか・・。