• 小
  • 中
  • 大

XMLファイルの取得


Google Maps JavaScript API V3 から、XMLファイルの読み込み関数 と XMLパーサーのライブラリ。(GDownloadUrl関数やGXml.parse ) がなくなりました。


そのためjQueryのJavaScriptライブラリーを利用します。
<script type="text/javascript" 
src="http://maps.google.com/maps/api/js?
sensor=false&language=ja"></script>
<script type="text/javascript" src="jquery-1.5.2.js"></script>
<script type="text/javascript">
//<![CDATA[
document.write('<scr'+'ipt src="./サンプル.js "
type="text/javascript" charset= "utf-8"></scr'+'ipt>');
// ]]>
</script>

XMLファイルを読み込みます。

$(function(){
//XMLファイル読み込み開始
$.ajax({
url:"map.xml",//外部ファイル
cache:false,
dataType:"xml",
success:function(xml){
var data=xmlRequest(xml);
}
});
});

読み込んだXMLファイルを配列にまとめます。マーカーで使うデータを Markerオブジェクトから集めて配列を作成します。
// XMLファイル読み込みマーカーへデータ格納
function xmlRequest(xml){{
var data=[];
$(xml).find("MarkerData > marker").each(function(){
var dat={};
dat.lat=this.getAttribute("lat");
dat.lng=this.getAttribute("lng");
$(this).children().each(function(){
if(this.childNodes.length>0)dat[this.tagName]
=this.childNodes[0].nodeValue;
});
data.push(dat);
});
return data;
}

複数のMarkerクラスを生成
Mapクラスを生成して、配列からネストしながら Markerクラスを追加していきます。
function initialize(data){
var opts={
zoom:15,
center:new google.maps.LatLng(35.681382,139.766084),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map
 (document.getElementById("map_canvas"),opts);
var i=data.length;
while(i-- >0){
var dat=data[i];
var obj={
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map
};
var marker=new google.maps.Marker(obj);
}
}


サンプルコード


サンプル.js
外部ファイルXMLファイル読み込み地図上に複数のマーカーを表示しマーカークリックで情報ウインドウを開き、マップクリックで情報ウインドウを閉じる。


$(function(){
//XMLファイル読み込み開始
$.ajax({
url:"map.xml",//外部ファイル
cache:false,
dataType:"xml",
success:function(xml){
var data=xmlRequest(xml);
initialize(data);
}
});
});

// XMLファイル読み込みマーカーへデータ格納
function xmlRequest(xml){{
var data=[];
$(xml).find("MarkerData > marker").each(function(){
var dat={};
dat.lat=this.getAttribute("lat");
dat.lng=this.getAttribute("lng");
$(this).children().each(function(){
if(this.childNodes.length>0)dat[this.tagName]
=this.childNodes[0].nodeValue;
});
data.push(dat);
});
return data;
}

// Attach Message
function attach_message( map, marker, msg, iw ){
google.maps.event.addListener(marker, 'click',
function( event ){
iw.setContent( msg );iw.open(map, marker);});
}

function initialize(data){
var opts={
zoom:15,
center:new google.maps.LatLng(35.681382,139.766084),
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map
(document.getElementById("map_canvas"),opts);
if (data != null) {
var i=data.length;
}
var iw = new google.maps.InfoWindow();
while(i-- >0){
var dat=data[i];
var obj={
position:new google.maps.LatLng(dat.lat,dat.lng),
map:map
};
var marker=new google.maps.Marker(obj);
attach_message(map, marker, dat.content,iw);
 //マップクリックイベントを追加
google.maps.event.addListener(map, 'click', function(e) {
//インフォウィンドウを消去
iw.close();
});
}
}

サンプル.html
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps v3 JavaScript API サンプル</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./js/jquery-1.5.2.js"></script>
<script type="text/javascript">
//<![CDATA[
document.write('<scr'+'ipt src="./サンプル.js "
type="text/javascript" charset= "utf-8"></scr'+'ipt>');
// ]]>
</script>
</head>
<body onload="initialize()">
<p>Google Maps v3 APIを使ったサンプル。</p>
<div id="map_canvas" style="width:500px; height:300px"></div>
</body>
</html>


表示例 XML形式のファイルからデータを取得しマーカーを表示


Google Maps サンプル > XML形式のファイルのデータを取得し複数マーカーを表示