「GoogleMaps API V3」 の使い方その4(イベント)
今回は地図の上に、簡単なマーカーを表示したいと思います。
■マップのイベント
マップなどの各種オブジェクトに対して、ユーザインターフェース等からのイベントを処理できるようになっています。
以下の例は、マップ上でクリックした場所の緯度・経度をアラートで表示します。
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" > |
05 | function initialize() { |
07 | var latlng = new google.maps.LatLng(36.062092, 136.223323); |
10 | mapTypeId: google.maps.MapTypeId.ROADMAP, |
14 | var gmap = new google.maps.Map(document.getElementById( "map" ), mapOptions); |
16 | google.maps.event.addListener(gmap, 'click' , function (event){ |
17 | alert( "クリック!! 緯度=" + event.latLng.lat() + " 経度=" + event.latLng.lng()); |
22 | <body onload= "initialize()" > |
23 | <div id= "map" style= "width: 300px; height: 300px;" ></div> |
「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()」を使って、緯度を取得します。
■マーカーのイベント
マーカーをクリックしたときに、アラートを表示する簡単な例を示します。
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" > |
05 | function initialize() { |
07 | var latlng = new google.maps.LatLng(36.062092, 136.223323); |
10 | mapTypeId: google.maps.MapTypeId.ROADMAP, |
14 | var gmap = new google.maps.Map(document.getElementById( "map" ), mapOptions); |
16 | var gmarker = new google.maps.Marker({ |
22 | google.maps.event.addListener(gmarker, 'click' , function (event) { |
28 | <body onload= "initialize()" > |
29 | <div id= "map" style= "width: 300px; height: 300px;" ></div> |
マーカーのクリックイベントのハンドラで「function(event)」と宣言していますが、ブラウザによって返されるeventオブジェクトのプロパティが異なるため、これを利用することはないと思われます。
もし、マーカーの緯度経度を取得するのであれば、以下の様に位置(緯度経度)取得メソッドを使用します。
2 | google.maps.event.addListener(gmarker, 'click' , function (event) { |
3 | var latlng = this .getPosition(); |
4 | 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)