XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]

前回までは以下の通り。

  1. 地図の表示と緯度経度の取得[GoogleMapsAPIVersion3]
  2. マーカーと情報ウィンドウの表示と削除[GoogleMapsAPIVersion3]

地図、マーカー、情報ウィンドウが表示できたら、地点情報XMLを読み込んで該当する地点にマーカーを表示させます。
完成まであと一歩といった感じでしょうか。

XMLを読み込む

XML読み込み部分を作ります。
その前に、XMLがなければどないしようもないので、以下のようなサンプルXMLを用意しました。
単純に地点の名称と、緯度経度のXMLデータです。

sample.xml

さて、肝心の読み込みですが、さっと調べてみるとjQueryが便利そうなのでコイツを使います。
jQueryは他にも色々な用途で使えるので、遅かれ早かれ導入することになるでしょう。

本家サイトから、最新のMinified versionをダウンロードしてきます。
http://docs.jquery.com/Downloading_jQuery

この時は1.4.2が最新でした。
サンプルHTMLと同じディレクトリに保存して、読み込みます。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

XMLを読み込むのは以下のサイトを参考にしました。
というか、ソースをほとんどコピーですが。
http://h2ham.seesaa.net/article/100408702.html

XMLを読み込んでしまえば、マーカー表示を呼び出して、該当ポイントにマーカーとふきだしを仕込んでいきます。
一足飛びにこんな感じ。

//XMLで取得した地点を地図上でマーカーに表示
function setPointMarker(){
	//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);
			});
		}
	});
}

以下のページで少し調べてみると
http://semooh.jp/jquery/api/ajax/jQuery.ajax/options/

jQuery.ajax()の他にもjQuery.get()とかいうのもあるようです。
ちなみに、jQuery.get()の場合、こんな感じで書くと同じような動作をするみたいですね。

function setPointMarker(){
	//XML取得
	$.get("sample.xml",function(data){
	//帰ってきた地点の数だけループ
		$(data).find("Locate").each(function(){
			var LocateLat = $("lat",this).text();
			var LocateLng = $("lng",this).text();
			var LocateName = $("name",this).text();
			//マーカーをセット
			MarkerSet(LocateLat,LocateLng,LocateName);
		});
	});
}

違いは、jQuery.ajax()は読み込みを失敗したときの処理をかけるけど、jQuery.get()は書けないらしいです。
あと、jQuery.get()の方が実装が簡単。
確かに、ファイル名するだけなんで簡単かなぁ。
最後に、地点データを読み込むボタンをHTMLで作ってやります。

<div><input type="button" value="地点データを読み込む" onclick="setPointMarker()" onkeypress="setPointMarker()" /></div>

完成したコードがこちら。

<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(){
		//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);
				});
			}
		});
	}
</script>
</head>
<body onload="initialize()">
	<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>
</body>
</html>

動作サンプル

「地点データを読み込む」ボタンをクリックすると、XMLに書いてある地点データがマーカーとして表示されます。
さらに、マーカーをクリックすると、クリックしたマーカーの名称が表示されます。

いい感じになってきました。あと少しと言ったところでしょうか。

XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]” への5件のフィードバック

  1. 非常に判りやすい内容で、サイトのような設定が出来たのですが、ファイルの読み込みに失敗します。オリジナル(動作サンプル)ではOKです。
    ご指導頂けますか?
    よろしくお願いします。

    1. 独り言のようなエントリーにコメントありがとうございます。

      サンプルを拝見させていただきました。
      sample.xmlをブラウザで開くとXMLパースエラーが出たので、これが原因だと思います。
       ・sample.xmlの文字コードをShift-JIS→UTF-8に変換
       ・<?xml~ の頭に入っていたスペースを削除
       ・sample.xmlに入っている「-」を削除
      をすると、パースエラーが出なくなったので、たぶんこれで表示されると思います。

  2. 有難うございました。
    OKになりました。
    只、xmlファイルはフォルダーにおいているので、ローカルで動作すると思うのですが、プラウザ経由でないと、前と同じように読めないです。

    1. さらにコメントありがとうございます。
      ブラウザによっては、Javascriptでローカルに保存されたファイルにアクセスできないようです。
      Chrome6.0、IE8はダメでしたが、Firefox3.6.10だとローカルに保存したxmlファイルを読んでくれました。

  3. Chromeで、情報ウィンドウがマーカーの後ろに行ってしまうようです。

    実は、私も同じ様なものを作っているのですが、この問題で悩んでいます・・・。

コメントを残す

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

CAPTCHA