4-1：最後にクリックされたマーカーを別のマーカーにする

今回は「マーカーイベント」について説明をしてみたいと思います。

イベントというのは、
　　　『地図をクリックした』、
　　　『ズームした』、
　　　『マウスが動いた』など、

何か変化が起きたことを総称して「イベント」といいます。

今回はイベントを簡単に理解してもらうための題材に

マーカーを使ったものを選びました。

今回のイベントは『クリックイベント』です。

クリックイベントとは、「何かをクリックした」というものです。

ということで、さっそく作成してみましょう。

・～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・～・

【今回の内容】
　　●マーカーＡ、マーカーＢ、マーカーＣをあらかじめ用意

　　●マーカーＡは初期状態で非表示
　　　マーカーＢとマーカーＣは初期状態で表示

　　●マーカーＣをクリックすると、マーカーＡを非表示にして
　　　マーカーＡを表示する。

　　●同様に、マーカーＢをクリックするとマーカーＡを表示する
　　　そのときに、マーカーＣは元に戻る

マーカーをクリックすると、別のマーカーに変わる
(表示する)

マーカーがクリックされたら、別のマーカーにするサンプルプログラム

マーカーがクリックされたら、別のマーカーにするサンプルプログラム

<!DOCTYPE html PUBLIC "-//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 JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    var lastClickMarker = null; // ← 最後にクリックしたマーカーを記憶
var markerA = null;
var map=null;
    function load() {
        if (GBrowserIsCompatible()) {
            //====================================//
            //           地図のポイント           //
            //====================================//
            var pointA = new GLatLng(35.6550,  139.7540);
            var pointB = new GLatLng(35.6560,  139.7550);
            var pointC = new GLatLng(35.6570,  139.7560);
            var pointD = new GLatLng(35.6580,  139.7570);
        
            //====================================//
            //             地図を作成             //
            //====================================//
            map = new GMap2(document.getElementById("map"));
            map.setCenter(pointC, 17);
            
            //====================================//
            //        マーカーを作成 & 追加       //
            //====================================//
            //マーカーＡ (デフォルトは非表示にする)
            markerA=activeMarker(pointA);
            map.addOverlay(markerA);
            markerA.hide();
            
            //マーカーＢ
            var markerB=createMarker(pointB, "markerB.png");
            map.addOverlay(markerB);
        
            //マーカーＣ
            var markerC=createMarker(pointC, "markerC.png");
            map.addOverlay(markerC);
        
            //マーカーＤ
            var markerD=createMarker(pointD, "markerD.png");
            map.addOverlay(markerD);
            
//地図上でマーカーがクリックされたとき、呼び出される
GEvent.addListener(map, "click", _markerControll);
        }
    }
    function createMarker(_point, iconfile){
      var _icon = new GIcon();
      _icon.image  = "http://googlemaps.googlermania.com/img/" + iconfile;
      _icon.shadow = "http://googlemaps.googlermania.com/img/shadow.png";
      _icon.iconSize = new GSize(20, 34);
      _icon.shadowSize = new GSize(37, 34);
      _icon.iconAnchor = new GPoint(9, 34);
      _icon.infoWindowAnchor = new GPoint(9, 2);
      _icon.infoShadowAnchor = new GPoint(18, 25);
      
      var marker = new GMarker(_point, _icon);
      return marker;
    }
    
    function activeMarker(_point){
      var _icon = new GIcon();
      _icon.image = "http://googlemaps.googlermania.com/img/marker_flag.png";
      _icon.shadow = "http://googlemaps.googlermania.com/img/marker_shadow.png";
      _icon.iconSize = new GSize(35, 35);
      _icon.shadowSize = new GSize(35, 35);
      _icon.iconAnchor = new GPoint(0, 35);
      _icon.infoWindowAnchor = new GPoint(18, 11);
      
      var marker = new GMarker(_point, _icon );
      return marker;
    }
    
//====================================//
// マーカー制御 //
//====================================//
function _markerControll(overlay,point){
    if(!overlay || overlay=="undefined"){return;}

    //infowindowだったら、何もしない
    var infowindow=map.getInfoWindow();
    if(infowindow==overlay){return;}

    if(overlay!=markerA && overlay!=lastClickMarker){
        if(lastClickMarker!=null){
            //前回にクリックされたマーカーを復元

            //lastClickMarkerをmarkerの位置に移動
           var marker_point=markerA.getLatLng();
           lastClickMarker.setLatLng(marker_point);

            //表示
            lastClickMarker.show();
            lastClickMarker=null;
       }

       //markerを非表示
       overlay.hide();

        //markerAをmarkerの位置に移動
        var marker_point=overlay.getLatLng();
        markerA.setLatLng(marker_point);

        //markerAを表示
        markerA.show();

        //メッセージを表示
        markerA.openInfoWindowHtml("<b>マーカーＡ</b>");

        //最後にクリックしたmarkerを記憶
        lastClickMarker=overlay;
    }
}
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

サンプルプログラムの解説

少々サンプルコードが長いのですが、やっていることは比較的に簡単です。

今回のメイン部分は赤枠緑枠青枠で囲んだ部分です。

まずは赤枠ですが、これは必要なグローバル変数を初期化しています。

これはあとからmapや、markerA変数などを使いまわす必要があるため、グローバル変数にしています。

次に緑枠では、ここでは今回の主役『イベント』を登録しています。

Google Maps APIでは、GEventクラスというのがGoogle Maps上で起こる全てのイベントを制御しています。

GEvent.addListenerは、そのGEventに"地図がclickイベントが発生したら、_markerControll関数に情報渡してくださいね"
と教えてあげる役割をしています。

今回の場合は、mapにクリックイベントのリスナーを登録しています。

つまり、地図上でユーザが何かをクリックしたときには、_markerController関数が呼び出されるようになります。

GEvent.addListener(source,event,handler)
 
　　　ソースオブジェクト(source)にイベント(event)が発生した際のリスナー(handler)を登録します
source：　 イベントを監視したいソースオブジェクトを指定する。
　　　　　 ソースオブジェクトは、GMapやGMarkerなどが指定できる。
event：　　監視する対象のイベントを指定する。
　　　　　 主なイベントは次の通り。
　　　　　　　　click  　 ：　クリックした
　　　　　　　　dblclick　：　ダブルクリックした
　　　　　　　　zoomend　 ：　地図のズームレベルが変化した
　　　　　　　　moveend　 ：  地図が移動した


handler：　イベントに関する情報を受け取り処理を行う関数を指定する。
　　　　　 渡される情報(パラメータ)は、登録したイベントによって異なる。

             【clickの場合】
　　　　　　　　function(overlay, point)

　　　　　　 【dblclickの場合】

　　　　　　　　function(overlay, point)

　　　　　　 【zoomendの場合】
　　　　　　　　function(oldLevel, newLevel)

　　　　　　 【moveendの場合】
　　　　　　　　function(none)

最後に青枠で囲まれた部分ですが、ここではマーカーがクリックされたときの処理を行っています。

実際に何をしているのかは、各行のコメントを読んでいただければ分かると思います。

ここで問題なのは、
//infowindowだったら、何もしない
という部分です。

なぜそんなことをしているのかというと、それは地図全体にイベントリスナーを登録したからです。

どうゆうことかというと、
　　markerA.openInfoWindowHtml("<b>マーカーＡ</b>");
の部分で、infoWindowオブジェクト(ふきだし）を表示しています。

これによって、ユーザがinfoWindowをクリックしたときに、この_markerController関数が呼ばれてしまうのです。

なのでoverlayがinfoWindowかどうかで判断して、markerでなければ処理しないようにしています。