「GoogleMaps API V3」マップのイベント,マーカーのイベント

「GoogleMaps API V3」の使い方その４（イベント）

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

■マップのイベント

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

01<head>
02<title>Google Map API v3-4</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // マップのクリックイベントの関数登録
16    google.maps.event.addListener(gmap, 'click', function(event){
17        alert("クリック!! 緯度=" + event.latLng.lat() + " 経度=" + event.latLng.lng());
18    });
19}
20</script>
21</head>
22<body onload="initialize()">
23    <div id="map" style="width: 300px; height: 300px;"></div>
24</body>
25</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()」を使って、緯度を取得します。

■マーカーのイベント

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

01<head>
02<title>Google Map API v3-3</title>
03<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
04<script type="text/javascript">
05function initialize() {
06    // Google Mapで利用する初期設定用の変数
07    var latlng = new google.maps.LatLng(36.062092, 136.223323);
08    var mapOptions = {
09        zoom: 14,
10        mapTypeId: google.maps.MapTypeId.ROADMAP,
11        center: latlng
12    };
13    // GoogleMapの生成
14    var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
15    // マーカーを生成
16    var gmarker = new google.maps.Marker({
17        map: gmap,        
18        position: latlng,
19        title: "福井駅"
20    });
21    // マーカーのクリックイベントの関数登録
22    google.maps.event.addListener(gmarker, 'click', function(event) {
23        alert("福井駅");
24    });
25}
26</script>
27</head>
28<body onload="initialize()">
29    <div id="map" style="width: 300px; height: 300px;"></div>
30</body>
31</html>

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

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

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

「GoogleMaps API V3」 の使い方その４（イベント）

■マップのイベント

■マーカーのイベント

■関連記事

「GoogleMaps API V3」の使い方その４（イベント）