Google Maps APIで遊んでみる その2
Google Map APIではGEventオブジェクトにリスナーを登録することによってイベント処理を行うことができます。
Google Maps API Documentation - Event Listeners
GEvent.addListener(source, eventName, function(){ ... });
GEvent.bind(source, eventName, object, function(){ ... });sourceにイベントをリッスンする対象のオブジェクトを指定します。指定できるのは、GMapとGMarkerのオブジェクトになります。
eventNameにはリッスンするイベントの種類を文字列で指定します。APIドキュメントでは、マウスイベント関連はclickしか書かれていないのですが、実際には'mousedown'や'mouseup'、'mouseover' など、通常のHMTLのマウスイベントも取れるようです*1 *2。
functionに呼び出す関数を指定します。
addListenerとbindの違いは、bindの場合、objectの引数で渡したオブジェクトがfunctionの実行主体になります。つまり、引数で渡したobjectがfunction内でthisになります。
これを使ってはてなマップをいじってみました。
以下のブックマークレットを実行すると、はてなマップ上でfotoのマーカーにマウスオーバーしただけで写真の吹き出しを表示するようになります。
javascript:void((function(){for(var i=0;i<page.fotos.points.length;i++){var hmarker = page.fotos.points[i];var gmarker = hmarker.marker;GEvent.bind(gmarker,'mouseover',hmarker, function(){this.openInfoWindow();});}})())IE6.0(on XP)とFirefox1.0で確認。ズームレベルを変えたりすると、マーカーが更新されて追加したイベントハンドラが消えてしまうで注意。
これを使えば、10/27のはてなアイデアミーティングで、「マウスオーバーが取れるかわからない」、「コード送って！」で検討中になっている『はてなアイデア 』も実装できるんじゃないかなと思います。
ちなみに、上記ブックマークレットでは、マウスアウトで吹き出しを閉じる処理をやってないです。吹き出しが開いたタイミングでマップがスクロールして、マウスオーバーしてしまうことがあるので。実際にidea:4072を実装するなら、吹き出しは使わずに自前のDivでツールチップみたいに表示したほうがよさそうです。
