libro
www.tuyano.com
JavaScript/Ajaxライブラリ入門

Google Maps API (3/4)

作成:2010-04-26 11:09
更新:2010-05-11 15:40

■マーカーと情報ウインドウ

マップ上には、さまざまなオブジェクトを追加し表示することができますが、中でももっとも重要なものといえば、「マーカー」と「情報ウインドウ」でしょう。


１．マーカーの作成
「マーカー」というのは、マップ上の特定の地点をマークするのに使われるものです。これは「google.maps.Marker」というオブジェクトとして用意されています。このMarkerオブジェクトは、
new google.maps.Marker( オプション設定の配列 )
このように、引数に必要な設定情報を配列にまとめたものを渡して作成をします。この配列に用意できる設定としては、とりあえず以下の３つだけ覚えておけばよいでしょう。

position: 表示位置を示すもの。LatLngオブジェクトで指定する
map: マーカーを表示するMapオブジェクトを指定する
title: マーカー上にマウスを重ねたとき表示されるテキスト


２．情報ウインドウについて
マーカーなどをクリックしたときに、吹き出しのように表示されるウインドウです。これはGoogle Maps API 2.0までは１枚しか開けなかったのですが、3.0からいくらでも開けるようになり使い勝手が向上しました。この情報ウインドウは、以下のように作成します。
new google.maps.InfoWindow( オプション設定の配列 )
引数には、例によってこのウインドウの設定を配列にまとめたものを渡します。配列に用意する項目としては、「content」だけ覚えておけばよいでしょう。これは、ウインドウに表示する内容です。テキストでもいいですし、HTMLのコードとして用意することもできます。

これでInfoWindowは作成されますが、実はこのままでは表示はされません。作成後、「open」というメソッドを呼び出してやることで、ウインドウが表示されます。これは以下のように呼び出します。
[InfoWindow].open( 表示するMap , 表示するオブジェクト )
InfoWindowは、地図の適当なところにぱっと表示できるわけではありません。これは「吹き出し」の形をしていることからわかるように、何かのオブジェクトに吹き出しとして情報を表示させるものです。ですから、表示するMapと共に、「どのオブジェクトに吹き出しをつけるか」を指定しないといけません。

では、以下に簡単な利用例をあげておきましょう。マップ上をクリックすると、そこにマーカーが作成され、そのマーカーに吹き出し（情報ウインドウ）が表示されます。


３．マップのイベント処理について
ここでは、マップをクリックするとマーカーを作成するdoActionが実行されます。これは、init関数で行っている「addListener」というメソッドで、イベント処理を追加しているためです。これは以下のように呼び出します。
google.maps.event.addListener( オブジェクト , "イベント名" , 呼び出す関数 );
ここでは、Mapにclickイベントを設定しています。同様にして、マーカーにイベントを設定させることも可能です。また呼び出す関数では、引数が１つ渡されます。これにより、発生したイベントの情報を得ることができまうs。

ここでは、クリックした場所にMarkerオブジェクトを作成していますが、クリックした位置というのは、イベント処理用の関数doActionで渡される引数「event」から得ることができます。このオブジェクトの「latLng」プロパティには、クリックした位置を示すLatLngオブジェクトが保管されています。

Googleマップを使っていて注意しなければいけないのは、「位置は、ブラウザ内の情報ではなく、マップに表示されている地図上の情報である」という点です。例えば、「クリックした位置に○○する」という場合、その「クリックした位置」とは、mouseX,mouseYといった「ブラウザ内のマウスの位置」ではありません。それは、「Mapに表示されている地図上の位置」でなければいけないのです。この点、勘違いしないようにしてください。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type"
			content="text/html; charset=utf8">
		<title>Sample Page</title>
		<script type="text/javascript"
			src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
		<script type="text/javascript">
		<!--
		var counter = 0;
		var map = null;
		
		function init(){
			var element = document.getElementById("map");
			var latlng = new google.maps.LatLng(35.682956,139.766092);
			var options = {
				zoom: 15,
				center: latlng,
				mapTypeId: google.maps.MapTypeId.SATELLITE,
			};
			map = new google.maps.Map(element,options);
			google.maps.event.addListener(map,"click",doAction);
		}

		function doAction(event){
			var options = {
				position: event.latLng,
				map: map,
				title: ++counter + "つ目"
			};
			var marker = new google.maps.Marker(options);
			var infoopt = { content: "クリックしたよ！" };
			var info = new google.maps.InfoWindow(infoopt);
			info.open(map,marker);
		}
		//-->
		</script>
	</head>
	<body onload="init();">
		<h1>Map Sample</h1>
		<div id="map" style="width:400px; height:400px;"></div>
	</body>
</html>
※関連コンテンツ

「JavaScript/Ajaxライブラリ入門」に戻る