4-2：地図の中心に常に『十字マーク』を表示する

「イベント」を使った例として、今回は地図が移動しても常に中心に十字マークを表示するというのを実現してみたいと思います。

と言ってもそう難しいものではなく、地図が移動したら十字マークを描画すると読み替えれば
簡単です。

今回は『地図が移動した』というのを検出することが目的なので、アイコンを使った簡単な方法を紹介します。

地図の中心に赤い十字マークが表示された様子
(表示する)

地図の中心に常に『十字マーク』を表示するサンプルプログラム

地図の中心に常に『十字マーク』を表示するサンプルプログラム

<!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 cross_icon = new GIcon();
cross_icon.image = "http://googlemaps.googlermania.com/uploads/cross_marker.gif";
cross_icon.iconSize = new GSize(39, 39);
cross_icon.iconAnchor = new GPoint(20, 20);
var option = {
                 icon  : cross_icon   //アイコン = cross_icon
                ,clickable : false    //クリック = 不可
             };
var cross_marker=null;
    //=====================================//
    //              メイン処理             //
    //=====================================//
    function load() {
        if (GBrowserIsCompatible()) {
            // 地図を作成
            var point = new GLatLng(35.6550, 139.7540);
            var map = new GMap2(document.getElementById("map"));
            map.setCenter(point, 17);
            
// 地図に十字マークを登録しておく
cross_marker = new GMarker(point, cross_icon);
map.addOverlay(cross_marker);


// イベントの登録 : 地図が移動中のとき、呼び出されるようにする
GEvent.addListener(map, "move", function(){
    drawCrossScope(map);
});
// 十字マークの描画
drawCrossScope(map);

        }
    }

    
//=====================================//
//  地図の中心に十字マークを描画する   //
//=====================================//
function drawCrossScope(map){
    // 現在表示している地図の中心地点を取得する
    var mapCenter = map.getCenter();
    
    //マーカーを地図の中心地点に移動させる
    cross_marker.setPoint(mapCenter);
}
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

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

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

まずは赤枠ですが、十字マークとなるアイコンのマーカーを作成しています。

地図上で目立つように赤色にしてみました。

マーカーの作り方については、『2-2：マーカーをオリジナル画像にする』をご覧ください。

作成しているマーカーの画像

緑枠では、赤枠の部分で作成したアイコンを地図上に追加しています。

ここまでは難しくないと思います。

次にオレンジ枠では、今回の主役『GEvent.addLister』の登場です。

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

GEvent.addListenerは、そのGEventに"地図で moveイベントが発生したら、_function ( ){ } を実行してください"
と登録しています。

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

つまり、地図の表示範囲が移動したとき、関数が呼び出されるようになります。

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

　　　　　　　　move   　 ：  地図が移動中

　　　　　　　　moveend　 ：  地図が移動したとき


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

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

　　　　　　 【dblclickの場合】

　　　　　　　　function(overlay, point)

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

　　　　　　 【movestartの場合】
　　　　　　　　function(none)

　　　　　　 【moveの場合】
　　　　　　　　function(none)

　　　　　　 【moveendの場合】
　　　　　　　　function(none)

最後に青枠で囲まれた部分ですが、ここでは地図の中心地点にマーカーを移動する処理を行っています。

マーカーは赤枠緑枠で作成・追加したものです。

これを地図の中心地点に移動することで、地図が移動したときに常に十字マークを表示する機能を実現しています。

【補足】

今回はイベントの処理を理解してもらうのがメインでしたので、マーカーを利用する簡易的な方法を紹介しました。

一般的にはポリラインを描画することで、十字マークを描画することが多いです。

これについては、また別の機会に紹介したいと思います。