【Google Map】イベント / Event

• google.maps.event.addListener()
• google.maps.event.addDomListener()

google.maps.event.addListener()

「Google Map」APIが作ったオブジェクトから発生したイベントを知るために、イベントリスナーを登録するために使う。 google.maps.Mapクラスのイベント bounds_changed 地図の見える範囲が変化したときに発生。 center_changed 地図の中心の経度・緯度が変化したときに発生。 click 地図上でマウスがクリックされた時に発生。 イベントが発生した位置の緯度・経度（latLng）を引数として渡す。 dblclick 地図上でマウスがWクリックされた時に発生。 イベントが発生した位置の緯度・経度（latLng）を引数として渡す。 drag 地図がドラッグ中に発生。 dragend 地図のドラッグが終了したときに発生。 dragstart 地図のドラッグが開始したときに発生。 maptypeid_changed 地図タイプが変化した時に発生。 mousemove 地図上をマウスカーソルが動いている時に発生。 mouseout マウスカーソルが地図上から外れる時に発生。 mouseover マウスカーソルが地図外から地図上に入るときに発生。 zoom_changed ズームレベルが変化したときに発生。 google.maps.Markerクラスのイベント animation_changed マーカーの「animation」プロパティが変化したときに発生。 click マーカーがクリックされたときに発生。 clickable_changed マーカーの「Clickable」プロパティが変化したときに発生。 dblclick マーカーがダブルクリックされたときに発生。 drag マーカーがドラッグ中に発生。 dragend マーカーのドラッグが終了したときに発生。 draggable_changed マーカーの「draggable」プロパティが変化したときに発生。 dragstart マーカーのドラッグが終了したときに発生。 icon_changed マーカーの「icon」プロパティが変化した時に発生。 mousedown マーカーの上で、「mousedown」イベントが発生したときに発生。 mouseout マウスカーソルがマーカーのアイコンエリアから離れるときに発生。 mouseover マウスカーソルが、マーカー上にあるときに発生。 mouseup マーカー上で、「mouseup」イベントが発生した時に発生。 position_changed マーカーの「position」プロパティが変化したときに発生。 visible_changed マーカーの「visible」プロパティが変化したときに発生。

google.maps.event.addDomListener()

地図を表示しているブラウザ側（window,document,bodyなど）から発生する「DOMイベントを知るために、イベントリスナーを登録するために使う。 DOMイベント イベントハンドラ 説明 onBlur ページやフォーム要素からフォーカスが外れた時 onFocus ページやフォーム要素にフォーカスが当たった時 onChange フォーム要素の選択、入力内容が変更された時 onSelect テキストが選択された時 onSelectStart ページ内の要素が選択された時　※IEのみ onSubmit フォームを送信する時 onReset フォームがリセットされた時 onAbort 画像の読み込みを中断した時 onError 画像の読み込み中にエラーが発生した時 onLoad ページや画像の読み込みが完了した時 onUnload ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新） onClick 要素やリンクをクリックした時 onDblClick 要素をダブルクリックした時 onKeyUp 押していたキーをあげた時 onKeyDown キーを押 onKeyPress キーを押してる時 onMouseOut マウスが離れた onMouseOver マウス乗った時 onMouseUp クリックしたマウスを上げた時 onMouseDown マウスでクリック onMouseMove マウスを動かしている時 onDragDrop マウスでドラッグ＆ドロップ　※NN4のみ

google.maps.event.addListener(mapCanvas, "zoom_changed", function(){ infoWnd.setContent("現在のズームレベル："+mapCanvas.getZoom()); });

<script type=" text/javascript" src="http://maps.googleapis.com/maps/api/js?key=自分のAPIキーを入力&sensor=false"></script>


<script type="text/javascript">

function initialize(){

var mapDiv=document.getElementById("map_canvas");
var mapCanvas=new google.maps.Map(mapDiv,{
center:new google.maps.LatLng(35.681382,139.766084),
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
});

var marker1 = new google.maps.Marker({position:new google.maps.LatLng(35.681382,139.766084),map:mapCanvas});


var infoWnd = new google.maps.InfoWindow({
position:new google.maps.LatLng(35.681382,139.766084),
content:"Hello Window!"
});

//マーカー吹き出しを表示する方法。
infoWnd.open(null, marker1);

//マーカーの代わりに吹き出しを表示する方法。
//infoWnd.open(mapCanvas);


google.maps.event.addListener(mapCanvas,"zoom_changed",function(){
infoWnd.setContent("現在のズームレベル：" + mapCanvas.getZoom());
});

}

google.maps.event.addDomListener(window, "load", initialize);

</script>