イベント / 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>