• 小
  • 中
  • 大

マップ イベントの登録


地図やマーカーなどで発生するイベント通知の登録は、addListener() イベント ハンドラを使用して行います。このmethodは、オブジェクト、リッスン対象のイベント、指定されたイベントの発生時に呼び出す関数を取ります。


静的method戻り値説明
addListener(instance:Object, eventName:string, handler:Function)MapsEventListener指定されたオブジェクトのインスタンスに指定されたイベント名に、指定されたリスナ関数を追加します。このリスナの識別子を返します。識別子は eventRemoveListener() で使用できます。

下記例は地図に 'zoom' プロパティの変更に関するイベント ハンドラを追加し、zoom_changed イベントを受信したときには地図を大阪に移動します。
 google.maps.event.addListener(map,'zoom_changed',
function() {
setTimeout(moveOsaka,1000);
})
;

function moveOsaka() {
var darwin = new google.maps.LatLng
(34.686276,135.519727);
map.setCenter(darwin);
}

1つ目は引数でmap。2つ目以降イベント発生種類と処理を指定したものです。

サンプルコード

次のコードには、ユーザー イベントと状態変化イベントの両方が含まれています。クリックされたときに地図をズームするマーカーに対して、イベントハンドラを添付します。また、地図に 'zoom' プロパティの変更に関するイベント ハンドラを追加し、zoom_changed イベントを受信したときには地図を大阪に移動します。

サンプル.js


var map;
function initialize() {
var myLatlng = new google.maps.LatLng(35.658704,139.745408);
var opts = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map
(document.getElementById("map_canvas"), opts);

google.maps.event.addListener(map,'zoom_changed',
function() {
setTimeout(moveOsaka,1000);
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World!"
});

google.maps.event.addListener(marker, 'click',
function() {
map.setZoom(8);
});
}

function moveOsaka() {
var darwin = new google.maps.LatLng(34.686276,135.519727);
map.setCenter(darwin);
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="サンプル.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<p>マップ イベント Google Maps v3 APIを使ったサンプル。
マーカークリック・ズームチェンジ イベント発生で東京から大阪に移動</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 マーカークリック・ズームチェンジ


Google Maps サンプル > マップ イベントの登録