GEventを利用したシステム

GEventはGoogle Maps APIに用意されている地図に関するイベントを使うことのできるAPIです．イベントとは，「地図がクリックされたらメッセージを表示する」といったタイプの，ユーザの動きに反応して動作するページを実現するためのものです．

地図上でマウスイベントの処理を行うプログラム


以下は，元になる地図を表示するだけのプログラムです． 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;
	 charset=utf-8" />
	
	<script src="http://maps.google.com/maps?file=api
	&v=2&key=（ここにkeyを入力）"
        type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="gsample.js"
	 charset=utf-8"></script>
	
	<title>Google Maps Event Test Page</title>
</head>
<body>
	<div id="mymap" style="width: 500px; height: 400px"></div>
	
</body>
</html>




以下は，クリックしたらメッセージを表示させるJavaScriptのコードです．早稲田界隈の位置情報が設定されています．保存するファイル名は，上のコードに設定されているファイル名と一致させます（このサンプルではgsample.js）． 

function startUp(){
	var map= new GMap2(document.getElementById("mymap"));
	map.setCenter( new GLatLng(35.70749253887843,
	 139.71373558044434), 13 );
	GEvent.addListener(map, "click", showMessage);
}

function showMessage(){
	alert("ここですか？");
}

onload = startUp;
onunload = GUnload;


ウェブサイトはこちら

onloadに指定した関数ははstartUpです．このstartUpの最初の2行で，Google Maps APIの関数を利用してHTML文書の中のdiv要素を地図に作り替えて，早稲田界隈を中心に設定しています．
Google Maps APIで地図を表示するには，このようにまず，new GMap2でHTML上のdiv要素を地図に作り替えて，setCenterメソッドで初期表示位置とサイズを指定します．

次に，以下のコードに注目します． 

	GEvent.addListener(map, "click", showMessage);


GEvent.addListenerもGoogle Maps APIにより提供されている関数で，「地図がクリックされたら，showMessage関数を実行する」というアクションを登録するものです．このように，startUpでイベントが起きたときに実行したい関数を登録しておくと，実際のユーザの行動に反応してJavaScriptが実行されるようになります．このサンプルでは，地図がクリックされたら「ここですか？」というダイアログが表示されます．
この部分を以下のように書き換えると，緯度と経度の情報が表示されるようになります．クリックされた緯度と経度の情報はこの登録された関数が呼び出される際に第二引数として渡されており，それを利用することができるのです．

function showMessage(ov, point){
	alert("ここですか？ 座標は，"+ point);
}

ウェブサイトはこちら

このように，関数の利用によって，座標表示サービスという新たなサービスを提供することができます．


クリックのほかにも，以下のようなイベントが定義されています．APIリファレンスで調査することにより，利用することができます．

イベント名 引数 発生条件
"click" (overlay, latlng) 地図がクリックされたとき
"mouseover" (latlng) 地図上にマウスポインタが入ったとき
"mouseout" (latlng) 地図上からマウスポインタが出たとき
"mousemove" (latlng) 地図上をマウスポインタが動いているとき
"zoomend" (oldLevel, newLevel) 地図の縮尺変更終了時
"movestart" () 地図のドラッグ移動が開始されたとき
"move" () 地図のドラッグ移動中
"moveend" () 地図のドラッグ移動終了時

衛星写真モードと地図モードを切り替える

以下のように上のコードを修正することで，衛星写真モードと地図モードを切り替える仕組みを入れます．

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;
	 charset=utf-8" />
	
	<script src="http://maps.google.com/maps?file=api
	&v=2&key=（ここにkeyを入力）"
        type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="gsample3.js"
	 charset=utf-8"></script>
	
	<title>Google Maps Event Test Page</title>
</head>
<body>
	<div id="mymap" style="width: 500px; height: 400px"></div>
	
</body>
</html>


以下は，gsample3.jsとして保存されているファイルです．

var map;

function startUp(){
	map= new GMap2(document.getElementById("mymap"));
	map.setCenter( new GLatLng(35.70749253887843,
	 139.71373558044434), 13 );
	GEvent.addListener(map, "click", switchMode);
}

function switchMode(){
	if ( map.getCurrentMapType() == G_NORMAL_MAP )
	map.setMapType( G_SATELLITE_MAP );
	else if ( map.getCurrentMapType() == G_SATELLITE_MAP )
	map.setMapType( G_NORMAL_MAP );
}

onload = startUp;
onunload = GUnload;


ウェブサイトはこちら

上のコードでは，"click"イベントを処理する関数として，switchModeという関数を登録しました．また，地図オブジェクトを示すmapを，var mapとして，startUp関数の外で宣言しました．この宣言をstartUp関数の外に出すことで，StartUp関数だけではなくswitchMode関数の中でも（この変数を）利用して，作成した地図を切り替えて利用する操作を行うことが可能となります．
なお，地図モードは以下の2種類が指定できます．

モード 状態
G_NORMAL_MAP 普通の地図モード
G_SATELLITE_MAP 衛星写真モード


GControlコントロールでコントロール要素を表示させる

JavaScriptのコードとして，以下のコードを適用してください．

var map;

function startUp(){
	map= new GMap2(document.getElementById("mymap"));
	map.setCenter( new GLatLng(35.70749253887843 , 139.71373558044434), 13 );
	map.addControl(new GLargeMapControl());
	map.addControl(new GScaleControl());
	map.addControl(new GMapTypeControl());
	map.addControl(new GOverviewMapControl());
	}

onload = startUp;
onunload = GUnload;


ウェブサイトはこちら

これらのコントロールは，以下のとおり利用できます．
コントロール名 機能
GSmallZoomControl 拡大ボタンと縮小ボタンを追加
GSmallMapControl 拡大ボタンと縮小ボタンに加え，上下左右移動ボタンを追加
GLargeMapControl 拡大縮小ボタンとスライダー，上下左右移動ボタンを追加
GMapTypeControl 地図モードと衛星写真モードの切り替えボタンを追加
GScaleControl 縮尺を表す画像を追加
GOverviewMapControl 周辺地図画像を追加

演習課題