マーカーの置かれた地図サービス

地図サービスにおいて，頻繁に利用される機能のひとつとして，「地図上のマーカーがクリックされたら，そのマークした場所に関する情報を表示する」という機能があります．このためのサンプルを以下に説明します．．

地図上にマーカーを追加し，クリックされたらその場所に関する情報を表示する


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

<!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=（キーを入力）"
        type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="gmarker.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のコードです．早稲田界隈の位置情報が設定され，マーカーが１つ表示されます．クリックすると情報ウィンドウを表示します．保存するファイル名は，上のコードに設定されているファイル名と一致させます（このサンプルではgmarker.js）． 

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());

	var mk = new GMarker(new GLatLng(35.70749253887843,
	 139.71373558044434));
	map.addOverlay(mk);
	GEvent.addListener( mk, "click", showInfo);
	
	function showInfo() {
		mk.openInfoWindowHtml( " ここにあります！" );
	}		
}

onload = startUp;
onunload = GUnload;


ウェブサイトはこちら

"var"は，変数の宣言文です．ここでは"map"という変数が，一つの地図を表すインスタンスになっています．
座標をGLatLngクラスのインスタンスで与えて，マーカーを一つ生成しています．引数は経度，緯度の順になっています．ここで，マーカーのインスタンスは，"mk"という変数で表されます． GMap2で地図のインスタンスを生成したら，どこの地図を表示させるのかを指定します． map.setCenter( new GLatLng(35.70749253887843, 139.71373558044434), 13 ); として，インスタンスmapに対して，setCenterメソッドを実行します．setCenterに引数としてGLatLng形式で緯度と経度を与えると，その座標を中央とする地図が描画されます．インスタンス生成後は，このメソッドを必ず呼び出す必要があり，setCenterより前に何かの処理を行うとエラーが発生します．「13」はズーム倍率を示し，「0」が最も遠景で，世界地図が表示されます．数字が増えるほどズームアップします．

GMarkerでマーカを1つ生成し，map.addOverlay(mk)で，生成したマーカを地図上に重ね書き（オーバーレイ）します．最後のGEvent.addListener()メソッドは，何らかのイベント（例えば，クリックなど）に対してどのような反応をするべきかを定義する部分になっています．この場合は，マーカがクリックされたらメッセージを表示する，という動作を規定しています．引数として与えなければならないのは，対象となるインスタンス，イベントの種類，実行すべき関数の３つです．この場合，"mk"というインスタンスに対して，"click"がなされたときに，showInfoという関数が実行されます．
mk.openInfoWindowHtml( " ここにあります！" ); は，マーカに対して，情報ウィンドウを表示するものです．openInfoWindowHtml()メソッドの引数が，情報ウィンドウの中身になっています．

以下のように，あらかじめ定めれらた関数ではなく，無名の関数の定義を同時にやってしまってしまう形式もあります．
無名関数の中で，"mk"インスタンスに対してopenInfoWindowHtml()メソッドを呼び出すことにより，説明を吹き出し表示させることができます． 

	GEvent.addListener( mk, "click", function() {
		 var msg = "ここにあります！";
		 mk.openInfoWindowHtml(msg);
    });



以下は無名関数を使うケースの記述です．
HTMLファイルの記述は，かわりません．

<!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=（キーを入力）"
        type="text/javascript" charset="utf-8"></script>
	
	<script type="text/javascript" src="gmarker2.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>



スクリプトは無名関数を指定します．

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());

	var mk = new GMarker(new GLatLng(35.70749253887843,
	 139.71373558044434));
	map.addOverlay(mk);
	GEvent.addListener( mk, "click", function() {
		 var msg = "ここにあります！";
		 mk.openInfoWindowHtml(msg);
    });
}

onload = startUp;
onunload = GUnload;


ウェブサイトはこちら

演習課題