Google Map （v3） カスタムオーバーレイ

オーバーレイで表示したアイコンや、テキストがクリックできない。という
記事をたくさん見たので、その解決策を記載します。




https://developers.google.com/maps/documentation/javascript/overlays?hl=ja#Initializing

何やら、zIndexを変更する。との記事をよく見かけましたが、

上記のURL（api document ）を確認すると、レイヤーの順番が記載されていました。

ここから(api document)引用-----------------------------------

MapPanes タイプのペインのセットで地図上の各種レイヤの積み上げ順序を指定します。次のペインが使用可能で、最下部から最上部へと積み上げられる順にリスト表示されています。

• MapPanes.mapPane
• MapPanes.overlayLayer
• MapPanes.overlayShadow
• MapPanes.overlayImage
• MapPanes.floatShadow
• MapPanes.overlayMouseTarget
• MapPanes.floatPane

ここまで(api document)引用-----------------------------------

つまり、書き出しの際に、下記のように設定しているものを、

panes.overlayLayer.appendChild(div);

もっと上位のレイヤー「MapPanes.overlayMouseTarget」を使用するように変更。

panes.MapPanes.overlayMouseTarget.appendChild(div);

これでクリックイベントが取れました。