「GoogleMaps API V3」 の使い方その５（続イベント）

今回は地図の上の、マーカーをクリックした時に情報ウインドウを表示したいと思います。

■マーカーのイベントで情報ウインドウを表示

マップ上にマーカーを表示し、そのマーカーをクリックした時に情報ウインドウを表示します。
以下の例は、マーカーのクリックイベントの関数を登録する前で、情報ウインドウを生成しておき、クリックイベントの関数の中でその情報ウインドウを表示する様にしています。

<head>
<title>Google Map API v3-5</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
<script type="text/javascript">
function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	var gmap = new google.maps.Map(document.getElementById("map"), mapOptions);
	// マーカーを生成
	var gmarker = new google.maps.Marker({
		map: gmap,
		position: latlng,
		title: "福井駅"
	});
	// 情報ウィンドウの生成
	var infoWindow = new google.maps.InfoWindow({
		content: "InfoWindow - test",
		maxWidth: 200
	});
	// マーカーのクリックイベントの関数登録
	google.maps.event.addListener(gmarker, 'click', function(event) {
		// 情報ウィンドウの表示
		infoWindow.open(gmap, gmarker);
	});
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 300px; height: 300px;"></div>
</body>
</html>

■複数のマーカーイベントで情報ウインドウを表示

「使い方その３（マーカーの表示）」で複数のマーカーを表示しましたが、それを拡張してそれぞれのマーカーでクリックしたときに それぞれのマーカーの内容を表示する例を示します。 

<head>
<title>Google Map API v3-5</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
<script type="text/javascript">
// GoogleMapオブジェクトの変数宣言
var gmap;

function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	gmap = new google.maps.Map(document.getElementById("map"), mapOptions);

	// ５個のマーカー(座標に特に意味は無い)
	var markerData = [
		{ lat:"36.065487", lng:"136.230723", title:"marker-1" },
		{ lat:"36.067258", lng:"136.220604", title:"marker-2" },
		{ lat:"36.063794", lng:"136.220264", title:"marker-3" },
		{ lat:"36.062456", lng:"136.230704", title:"marker-4" },
		{ lat:"36.061456", lng:"136.220904", title:"marker-5" }
	];
	for (i = 0;i < markerData.length;i++) {
		// マーカーを生成
		var marker = new google.maps.Marker({
		    map: gmap,
		    position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
		    title: markerData[i].title
		});
		// 情報ウインドウの生成とクリックイベント関数の登録処理
		setMarkerListener(marker, markerData[i].title);
	}
}

// 情報ウインドウの生成とクリックイベント関数の登録処理
function setMarkerListener(marker, title) {
	// 情報ウィンドウの生成
	var infoWindow = new google.maps.InfoWindow({
	    content: title,
	    maxWidth: 200
	});
	// マーカーのクリックイベントの関数登録
	google.maps.event.addListener(marker, 'click', function(event) {
		// 情報ウィンドウの表示
		infoWindow.open(gmap, marker);
	});
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

最初の例で説明しましたイベントの処理とは、少し変わった部分があります。 先ず、GoogleMapオブジェクトの変数宣言を関数の外に置いた点です。 これは、gmap を別の関数からも参照しているため、グローバルな変数として宣言しました。

また、情報ウインドウの生成とクリックイベント関数の登録処理をひとつの関数として独立させてあります。
これは、この関数の中で生成される情報ウインドウのインスタンスがそれぞれのマーカー毎に別々のものになる様にしています。

このソースを作成する前に失敗したものがありますので、以下の例をご覧ください。
各マーカーは表示されますが、クリックしても5番目のマーカーのところにしか情報ウインドウは表示されません。

クリックイベントの関数のinfoWindowはforループ内の変数であるため、同じ変数が割り当てられて クリックイベント時にはforループ処理の最後の5番目のマーカーの情報ウインドウが残ったまま になっています。
それで、どのマーカーをクリックしても情報ウインドウには「marker-5」としか表示されません。 

<head>
<title>Google Map API v3-5</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=MyKeyCode" charset="utf-8"></script>
<script type="text/javascript">
// GoogleMapオブジェクトの変数宣言
var gmap;

function initialize() {
	// Google Mapで利用する初期設定用の変数
	var latlng = new google.maps.LatLng(36.062092, 136.223323);
	var mapOptions = {
		zoom: 14,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: latlng
	};
	// GoogleMapの生成
	gmap = new google.maps.Map(document.getElementById("map"), mapOptions);

	// ５個のマーカー(座標に特に意味は無い)
	var markerData = [
		{ lat:"36.065487", lng:"136.230723", title:"marker-1" },
		{ lat:"36.067258", lng:"136.220604", title:"marker-2" },
		{ lat:"36.063794", lng:"136.220264", title:"marker-3" },
		{ lat:"36.062456", lng:"136.230704", title:"marker-4" },
		{ lat:"36.061456", lng:"136.220904", title:"marker-5" }
	];
	for (i = 0;i < markerData.length;i++) {
		// マーカーを生成
		var marker = new google.maps.Marker({
		    map: gmap,
		    position: new google.maps.LatLng(markerData[i].lat, markerData[i].lng),
		    title: markerData[i].title
		});
		// 情報ウィンドウの生成
		var infoWindow = new google.maps.InfoWindow({
		    content: markerData[i].title,
		    maxWidth: 200
		});
		// マーカーのクリックイベントの関数登録
		google.maps.event.addListener(marker, 'click', function(event) {
			alert("marker:"+this.getTitle());
			// 情報ウィンドウの表示
			infoWindow.open(gmap, marker);
		});
	}
}
</script>
</head>
<body onload="initialize()">
	<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

■関連記事
⇒「GoogleMaps API V3」の使い方その１
⇒「GoogleMaps API V3」の使い方その２
⇒「GoogleMaps API V3」の使い方その３（マーカーの表示）
⇒「GoogleMaps API V3」の使い方その４（イベント）
⇒「GoogleMaps API V3」の使い方その６（続々イベント）
⇒「GoogleMaps API V3」の使い方その７（ポリライン・ポリゴン）
⇒「GoogleMaps API V3」の使い方その８（ジオコーディング）
⇒「GoogleMaps API V3」の使い方その９（ルート検索）
⇒「GoogleMaps API V3」の使い方その10（ルート検索2）
⇒「GoogleMaps API V3」の使い方その11（さらにInfowindow）

ページのトップへ戻る