リストをクリックしたら情報ウィンドウを表示する[jQuery]+[GoogleMapsAPIVersion3]

途中別のことをやっていて時間が空いてしまいましたが、GoogleMapsAPIです。

前回までは以下の通り。

残る仕様はひとつ。

リストに表示された名前をクリックしたら、該当地点のマーカーのふきだしが表示されます

これ少しハマりました。
ｊQueryのところで。
わかってしまえばなんともないんですけどね。

いろいろ調べてみると、考え方としては、リストがクリックされたら、マーカーがクリックされたイベントを呼ぶように書けばいいようです。
イベントを呼ぶのはGoogleMapsAPIにあります。
http://sites.google.com/site/gmapsapi3/Home/mapsapi-v3
http://sites.google.com/site/gmapsapi3/Home/v3_reference
このあたりのページを参考にしました。
後もうひとつ、実際の動作に近い動きをしているサイトのコードを参考にしましたが…。
サイト名、URLともにわからなくなりました。わかったら追記します。

リストをとりあえずaタグでくくってクリックできるようにします。とりあえず、hrefにはjavascript:void(0)を入れておきます。
こうしておくと、ページが動いたりリロードされたり、ヒストリーバックがおかしなことになりません。
おまじないみたいなものですね。

前回のリスト表示のところを少し改造します。

//リスト表示
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//リスト表示
$('#pointlist > ul').append(loc);

まずはこんな感じに。
前回はulに直接放り込むイメージでしたが、今回はloc変数内にセットしてから、ulに放り込むという形式に変更しています。

次に、マーカークリックイベントを仕込みます。

//リスト表示
//リストに対応するマーカー配列キーをセット
var marker_num = marker_ary.length - 1;
//liとaタグをセット
loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
//セットしたタグにイベント「マーカーがクリックされた」をセット
loc.bind('click', function(){
	google.maps.event.trigger(marker_ary[marker_num], 'click');
});
//リスト表示
$('#pointlist > ul').append(loc);

3行目で、イベント対象のマーカーのキーを算出します。一番新しいマーカーなので、配列数-1のはずですね。
7行目で、locにセットしたタグセットにイベントを仕込んでいます。
今回のイベントは　google.maps.event.trigger　を使ってます。
google.maps.event.addListener（）でもいけそうな気がしますが…参考にしたサイトのコードがtriggerを使ってたのでこうしました。
あとで　google.maps.event.addListener（）　でも試してみたいですが、今は放置します。

ハマったのがこのあたりでした。
イベントを仕込むのはいいんですが、最初はlocにセットせずになんとかイベントをぶち込もうとあがきました。

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

					//リスト表示
					//リストに対応するマーカー配列キーをセット
					var marker_num = marker_ary.length - 1;
					//liとaタグをセット
					loc = $('<li>').append($('<a href="javascript:void(0)"/>').text(LocateName));
					//セットしたタグにイベント「マーカーがクリックされた」をセット
					loc.bind('click', function(){
						google.maps.event.trigger(marker_ary[marker_num], 'click');
					});
					//リスト表示
					$('#pointlist > ul').append(loc);
				});
			}
		});
	}
</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>

→動作サンプル

左側に表示されたリストの地名をクリックすると、該当するマーカーが表示されます。
ちょっと苦戦しましたがうまくいきました。

記憶の新しいうちにと深夜に大慌てで書いたエントリなので、ちょっとまとまってませんね。
また後で追記などすることにします。

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル