表示されているマーカーのリストを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]
  3. XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

Googleさんと先人のおかげで、マーカーと情報ウィンドウまでサクサクと出来ました。
残る仕様は二つ。

  • 現在表示されている地点データの名前を、地図の外にリストとして表示します
  • リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

今回は「現在表示されている地点データの名前を、地図の外にリストとして表示します」の方をかたづけます。
これもjQueryを使えばすごく簡単。

まず、リストが表示される場所を確保します。

<body onload="initialize()">
<div id="pointlist" style="width:20em;float:left;">
	<ul>
		<li>testtest</li>
	</ul>
</div>
<div style="float:left;">
	<div id="map_canvas" style="width:600px; height:600px"></div>
	<div>
		経度<input type="text" size="20" id="ido" value="" />
		緯度<input type="text" size="20" id="keido" value="" />
		<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
	<div>
	<div><input type="button" value="地図中央にマーカー" onclick="setMarker()" onkeypress="setMarker()" /></div>
	<div><input type="button" value="地点データを読み込む" onclick="setPointMarker()" onkeypress="setPointMarker()" /></div>
</div>
</body>
</html>

これで、地図の左側にリストが表示されます。
もうあっさりとやっちゃいます。
マーカーを表示するときに、ついでにリストを表示してしまいます。

//XMLで取得した地点を地図上でマーカーに表示
function setPointMarker(){
	//リストの内容を削除
	$('#pointlist > ul').empty();

	//XML取得
	$.ajax({
		url: 'sample.xml',
		type: 'GET',
		dataType: 'xml',
		timeout: 1000,
		error: function(){
			alert("情報の読み込みに失敗しました");
		},
		success: function(xml){
			//帰ってきた地点の数だけループ
			$(xml).find("Locate").each(function(){
				var LocateLat = $("lat",this).text();
				var LocateLng = $("lng",this).text();
				var LocateName = $("name",this).text();
				//マーカーをセット
				MarkerSet(LocateLat,LocateLng,LocateName);
				//リスト表示
				$('#pointlist > ul').append("<li>"+LocateName+"</li>");
			});
		}
	});
}

4行目で、一旦リストの内容を全部消し、22行目でマーカーをセットした後、24行目で削除したulの中に、liを足していくというイメージですね。

HTMLとJavascriptをがっちゃんこするとこんな感じ。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
	var map;
	var marker_ary = new Array();
	var currentInfoWindow

	function initialize() {
		var latlng = new google.maps.LatLng(34.985458, 135.757755);
		var myOptions = {
			zoom: 8,
			center: latlng,
			mapTypeId: google.maps.MapTypeId.ROADMAP
		};
		map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	}

	//地図中央の緯度経度を表示
	function getMapcenter() {
		//地図中央の緯度経度を取得
		var mapcenter = map.getCenter();

		//テキストフィールドにセット
		document.getElementById("keido").value = mapcenter.lng();
		document.getElementById("ido").value = mapcenter.lat();
	}

	//地図の中央にマーカー
	function setMarker() {
		var mapCenter = map.getCenter();

		//マーカー削除
		MarkerClear();

		//マーカー表示
		MarkerSet(mapCenter.lat(),mapCenter.lng(),'test');
	}

	//マーカー削除
	function MarkerClear() {
		//表示中のマーカーがあれば削除
		if(marker_ary.length > 0){
			//マーカー削除
			for (i = 0; i <  marker_ary.length; i++) {
				marker_ary&#91;i&#93;.setMap();
			}
			//配列削除
			for (i = 0; i <=  marker_ary.length; i++) {
				marker_ary.shift();
			}
		}
	}

	function MarkerSet(lat,lng,text){
		var marker_num = marker_ary.length;
		var marker_position = new google.maps.LatLng(lat,lng);
		var markerOpts = {
			map: map, 
			position: marker_position
		};
		marker_ary&#91;marker_num&#93; = new google.maps.Marker(markerOpts);

		//textが渡されていたらふきだしをセット
		if(text.length>0){
			var infoWndOpts = {
				content : text
			};
			var infoWnd = new google.maps.InfoWindow(infoWndOpts);
			google.maps.event.addListener(marker_ary[marker_num], "click", function(){

				//先に開いた情報ウィンドウがあれば、closeする
				if (currentInfoWindow) {
					currentInfoWindow.close();
				}

				//情報ウィンドウを開く
				infoWnd.open(map, marker_ary[marker_num]);

				//開いた情報ウィンドウを記録しておく
				currentInfoWindow = infoWnd;
			});
		}
	}

	//XMLで取得した地点を地図上でマーカーに表示
	function setPointMarker(){
		//リストの内容を削除
		$('#pointlist > ul').empty();

		//XML取得
		$.ajax({
			url: 'sample.xml',
			type: 'GET',
			dataType: 'xml',
			timeout: 1000,
			error: function(){
				alert("情報の読み込みに失敗しました");
			},
			success: function(xml){
				//帰ってきた地点の数だけループ
				$(xml).find("Locate").each(function(){
					var LocateLat = $("lat",this).text();
					var LocateLng = $("lng",this).text();
					var LocateName = $("name",this).text();
					//マーカーをセット
					MarkerSet(LocateLat,LocateLng,LocateName);
					//リスト表示
					$('#pointlist > ul').append("<li>"+LocateName+"</li>");
				});
			}
		});
	}
</script>
</head>
<body onload="initialize()">
<div id="pointlist" style="width:20em;float:left;">
	<ul>
		<li>地点リスト</li>
	</ul>
</div>
<div style="float:left;">
	<div id="map_canvas" style="width:600px; height:600px"></div>
	<div>
		経度<input type="text" size="20" id="ido" value="" />
		緯度<input type="text" size="20" id="keido" value="" />
		<input type="button" value="地図中央の緯度経度" onclick="getMapcenter()" onkeypress="getMapcenter()" />
	<div>
	<div><input type="button" value="地図中央にマーカー" onclick="setMarker()" onkeypress="setMarker()" /></div>
	<div><input type="button" value="地点データを読み込む" onclick="setPointMarker()" onkeypress="setPointMarker()" /></div>
</div>
</body>
</html>

動作サンプル

HTMLは10行弱増えましたが、Javascriptのコードは実質2行増えただけ。
おそろしく便利で高機能…jQuertyさまさまです。足を向けて寝られません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA