| 店名 | 住所 | 詳細 |
|---|---|---|
| foo | いろは町 | 店舗の詳細はこちら |
| bar | にほへ町 | 店舗の詳細はこちら |
| baz | ちりぬ町 | 店舗の詳細はこちら |
上記のように、htmlのテーブルで店舗一覧などが表示されていて、そのページ内にgooglemaps APIで埋め込んだ地図が表示されていて、店舗のマーカーが打たれてる、そんなシチュ。
一覧の中からある店舗の行をクリックしたら地図も連動してくれるとうれしいですよね。じゃあ、行全体（tr）にイベントを登録しよう。
…でも、ちょっと待った。「店舗の詳細はこちら」のリンクがあるから、各行の最後のtdだけはイベントが反応されるとちょっと困る。
…こんなときどうしようか、ということで。
function tableConnectedMaps(marker, map, latlng, i) {
var tr = document.getElementById("tr_"+ i); //tr全体のオブジェクトを取得
var td = document.getElementById("tdHOGE_"+ i); //あるtd（HOGE）のオブジェクトを取得
//一覧をクリックされたら、マーカーを擬似クリック
google.maps.event.addDomListener(tr, "click", function(){
google.maps.event.trigger(marker, "click");
});
//あるtd（HOGE）だけクリックイベントをキャンセルする
google.maps.event.addDomListener(td, "click", function(e){
e.stopPropagation();
});
}
最終的にこうなりました。googlemapsaAPIの表示部分は割愛。この関数をマーカー作成のループの中でコールして、イベントを登録していく。なお、冒頭の変数２つのgetElementByIdを見ると分かるように、各trとtrごとのtd（今回は「詳細」の列）にはIDを付与して、全部独立したオブジェクトにしてます（頭悪い
<!-- こんな感じ --> <table border="1"> <tr> <th>店名</th><th>住所</th><th>詳細</th> </tr> <tr id="tr_1"> <td>foo</td><td>いろは町</td><td id="tdHOGE_1"><a href="#">店舗の詳細はこちら</a></td> </tr> <tr id="tr_2"> <td>bar</td><td>にほへ町</td><td id="tdHOGE_2"><a href="#">店舗の詳細はこちら</a></td> </tr> <tr id="tr_3"> <td>baz</td><td>ちりぬ町</td><td id="tdHOGE_3"><a href="#">店舗の詳細はこちら</a></td> </tr> </table>
まあ、こうすれば動くよね、ということで。なお、preventDefaultでは無効化できませんでした。