掲載日： 2005年 12月 16日
Ajax Google MapsにXMLデータを表示する
Google MapsにXMLデータを表示する
県庁所在地座標をロードして表示する
→サンプルこのサンプルは、以前の記事「OPTION要素をXMLで書き換える」を利用し、それに地図を連動させています。 使用したXMLは、そちらの記事をご覧下さい。
Ajaxな通信でロードされたXMLデータで表示したOPTIONリストを選択すると、地図の中心に選択された県の県庁所在地が表示され、さらに、そこへ「立体ふきだし」のような情報ウインドウを表示します。
【上記サンプルのソース】
<!DOCTYPE html PUBLIC "-//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">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<!-- 下記キーは、必ず自分専用のものをhttp://www.google.com/apis/maps/で取得して使ってください
キーの取得方法は→Google Maps 設置までの流れ
-->
<script src="http://maps.google.com/maps?file=api&v=1&key=自分専用のキー"
type="text/javascript"></script>
<script type = "text/javascript">
//<![CDATA[
////
//送信用関数
//
function loadFile(url)
{
var request = GXmlHttp.create()
request.open("POST",url , true)
request.onreadystatechange = function() {
if (request.readyState == 4) {
on_loadedXML(request)
}
}
request.send('') //この引数をnullにするとOpera8.02/8.5/9bが動作しなくなります
}
////
//コールバック関数 ( 受信時に実行されます )
//
function on_loadedXML(oj)
{
//responseXMLでレスポンスを取得
var res = oj.responseXML
//OPTION書き換え作業用オブジェクト
resOj = new chgXMLtoHTMLOptions(res,document.test1.s0)
resOj.addOptions()
}
////
// 読み込んだXMLのデータをもとにOPTIONを書き換えるメソッドを作成します
//
function chgXMLtoHTMLOptions(xdoc,oj){
return {
//XMLのitems,value,textを連想配列で返します
setItems : function (){
//XML内の"items"という名前のタグ(要素)の配列を作る
var items = xdoc.getElementsByTagName("items")
//XML内の都道府県名データ"ken"という名前のタグ(要素)の配列を作る
var ken = xdoc.getElementsByTagName("ken")
//XML内の経度データ"lon"という名前のタグ(要素)の配列を作る
var lon = xdoc.getElementsByTagName("lon")
//XML内の緯度データ"lat"という名前のタグ(要素)の配列を作る
var lat = xdoc.getElementsByTagName("lat")
return { 'items':items,'kens':ken,'lons':lon,'lats':lat };
},
//XMLのデータからオプションを生成します
addOptions : function (){
//すべてのオプションを削除します
this.delAllOptions(oj)
//XMLデータのオブジェクトを受け取ります
var data = this.setItems()
//"item"タグが出てきた順に処理します
for( i = 0 ; i < data.items.length ; i++ ){
var text = data.kens[i].firstChild.nodeValue
var value = data.lons[i].firstChild.nodeValue
+','+ data.lats[i].firstChild.nodeValue
oj.options[oj.length]=new Option(text,value)
}
},
//すべてのオプションを削除します
delAllOptions : function (oj){
var optionIndex = oj.options.length
for ( i=0 ; i <= optionIndex ; i++ ){
oj.options[0]=null
}
},
//optionが選択された時の処理
onselectedOption : function(oj){
var lon = oj.options[oj.selectedIndex].value.split(',')[0]
var lat = oj.options[oj.selectedIndex].value.split(',')[1]
//情報ウインドウ内の文字列を指定します
//(この場合<nobr>がないとSafariでレイアウトが崩れます)
var msg ='<nobr>'+ oj.options[oj.selectedIndex].text+'が選択されました。<br />'
+ '<b>経度 : </b>'+ lon +'<br />'
+ '<b>緯度 : </b>'+ lat +'<br /></nobr>'
//地図へ表示
this.showToMap(lon,lat,msg)
},
showToMap : function(lon,lat,msg){
//地図表示
map.centerAndZoom(new GPoint(lon,lat), 0);
//情報ウインドウ表示
map.openInfoWindowHtml(map.getCenterLatLng(),msg);
}
}
}
//]]>
</script>
</head>
<body>
<!-- このDIVへ地図を表示します -->
<div id="map" style="width: 500px; height: 400px;float:left"></div>
<form name="test1" style = "margin:0px">
<input type = "button"
style = "width:150px;height:20px;margin:0px;"
value = "都道府県名リスト"
onclick = "loadFile('./ken.xml')"><br>
<select name = "s0"
style = "width:150px;height:380px;background-color:#ffdf50;color:#ff9114;"
size = "5"
onchange = "resOj.onselectedOption(this)">
<option selected> --ここへ読み込まれます--
</select>
</form>
<script type="text/javascript">
//<![CDATA[
////
// 日本測地系座標を使いたいとき用パッチ
//
//2005.12.1以降Google Mapsの日本周辺での測地系が世界測地系(wgs84)に変わりました。
//2005.11.30以前の日本測地系座標を使いたいときは
//GPointクラスを使用前に下記のように上書きします。
//世界測地系(wgs84)の座標を使うときは不要です
GPoint = function (a,b){
this.y = b - b * 0.00010695 + a * 0.000017464 + 0.0046017;
this.x = a - b * 0.000046038 - a * 0.000083043 + 0.010040;
}
////
// 地図作成
//
var map = new GMap(document.getElementById("map"));
map.addControl(new GLargeMapControl());
//東京タワーの経緯度とズーム値(整数で0が詳細)を指定します
// 経緯度は、ここ↓でも調べられます
// http://jsgt.org/ajax/newmon/samples/chapter03/03-31/getlatlon3.htm
map.centerAndZoom(new GPoint(139.69512732988332,35.685483113982414), 0);
//]]>
</script>
</body>
</html>
ソース内の太字は、今回追加したメソッドです。XMLデータから取り出した経緯度を使って地図に表示するための処理です。
いくつか、クロスブラウザな方法やGoogle Maps APIについてのTipsなども含まれていますが、ソース内に書き込んでありますのでご参照ください。
このように、Google Mapsでは、自分が作成したデータを使って、いろいろな情報を地図上へ表示させることが可能です。
