「GoogleMaps API V3」 の使い方その4(イベント)

今回は地図の上に、簡単なマーカーを表示したいと思います。

■マップのイベント

マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。

<head>
<title>Google Map API v3-4</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
	// マップのクリックイベントの関数登録
	google.maps.event.addListener(gmap, 'click', function(event){
		alert("クリック!! 緯度=" + event.latLng.lat() + " 経度=" + event.latLng.lng());
	});
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

「google.maps.event」の「addListener」メソッドを使って、イベントリスナーを登録します。
「addListener」の引数について
   addListener(instance, eventName, handler)

引数 タイプ 内容
instance Object 対象オブジェクトのインスタンス
(例ではマップなので gmap を渡す)
eventName string イベント名
('click','dblclick','mouseup','mousedown','mouseover','mouseout'等)
handler function リスナ関数
(例の様に直接宣言するか、別に関数を宣言しその名前を指定)

この例のリスナ関数の引数は、MouseEventのオブジェクトが返されてきます。
引数の名前を「event」としましたが、分かりやすい識別名を宣言します。
「event」のオブジェクトには、タイプが「LatLng」のプロパティ「latLng」が存在します。 それでタイプ「LatLng」の緯度取得メソッドである「lat()」を使って、緯度を取得します。


■マーカーのイベント

マーカーをクリックしたときに、アラートを表示する簡単な例を示します。

<head>
<title>Google Map API v3-3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
	// マーカーを生成
	var gmarker = new google.maps.Marker({
		map: gmap,        
		position: latlng,
		title: "福井駅"
	});
	// マーカーのクリックイベントの関数登録
	google.maps.event.addListener(gmarker, 'click', function(event) {
		alert("福井駅");
	});
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、ブラウザによって返されるeventオブジェクトのプロパティが異なるため、これを利用することはないと思われます。
もし、マーカーの緯度経度を取得するのであれば、以下の様に位置(緯度経度)取得メソッドを使用します。

 	// マーカーのクリックイベントの関数登録
	google.maps.event.addListener(gmarker, 'click', function(event) {
		var latlng = this.getPosition();
		alert("福井駅 lat:"+latlng.lat()+"  lng:"+latlng.lng());
	});

補足説明ですが、「this」キーワードは、実行中のコードが「自分自身」を表すオブジェクトにアクセスするもので、この場合では、functionを持っているマーカーオブジェクトを指し示し、マーカーオブジェクトが 持っているメソッドをアクセスすることができます。



■関連記事
「GoogleMaps API V3」の使い方その1
「GoogleMaps API V3」の使い方その2
「GoogleMaps API V3」の使い方その3(マーカーの表示)
「GoogleMaps API V3」の使い方その5(続イベント)
「GoogleMaps API V3」の使い方その6(続々イベント)
「GoogleMaps API V3」の使い方その7(ポリライン・ポリゴン)
「GoogleMaps API V3」の使い方その8(ジオコーディング)
「GoogleMaps API V3」の使い方その9(ルート検索)
「GoogleMaps API V3」の使い方その10(ルート検索2)
「GoogleMaps API V3」の使い方その11(さらにInfowindow)

ページのトップへ戻る