前回までは以下の通り。
地図、マーカー、情報ウィンドウが表示できたら、地点情報XMLを読み込んで該当する地点にマーカーを表示させます。
完成まであと一歩といった感じでしょうか。
XMLを読み込む
XML読み込み部分を作ります。
その前に、XMLがなければどないしようもないので、以下のようなサンプルXMLを用意しました。
単純に地点の名称と、緯度経度の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[i].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[marker_num] = 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に書いてある地点データがマーカーとして表示されます。
さらに、マーカーをクリックすると、クリックしたマーカーの名称が表示されます。
いい感じになってきました。あと少しと言ったところでしょうか。
5 comments on “XMLを読み込んでマーカーを表示する[jQuery]+[GoogleMapsAPIVersion3]”
非常に判りやすい内容で、サイトのような設定が出来たのですが、ファイルの読み込みに失敗します。オリジナル（動作サンプル）ではOKです。
ご指導頂けますか？
よろしくお願いします。
独り言のようなエントリーにコメントありがとうございます。
サンプルを拝見させていただきました。
sample.xmlをブラウザで開くとXMLパースエラーが出たので、これが原因だと思います。
・sample.xmlの文字コードをShift-JIS→UTF-8に変換
・<?xml～ の頭に入っていたスペースを削除
・sample.xmlに入っている「-」を削除
をすると、パースエラーが出なくなったので、たぶんこれで表示されると思います。
有難うございました。
OKになりました。
只、xmlファイルはフォルダーにおいているので、ローカルで動作すると思うのですが、プラウザ経由でないと、前と同じように読めないです。
さらにコメントありがとうございます。
ブラウザによっては、Javascriptでローカルに保存されたファイルにアクセスできないようです。
Chrome6.0、IE8はダメでしたが、Firefox3.6.10だとローカルに保存したxmlファイルを読んでくれました。
Chromeで、情報ウィンドウがマーカーの後ろに行ってしまうようです。
実は、私も同じ様なものを作っているのですが、この問題で悩んでいます・・・。