Javascript

【Javascript】Ajax Google MapsにXMLデータを表示する

Javascript関連情報

更新日：2005年12月16日

Ajax Google MapsにXMLデータを表示する

高橋登史朗

今回は、いよいよ、自分が作成したXMLデータをAjaxを使用した方法で読み込み、Google Mapsへ表示してみます。

Google MapsにXMLデータを表示する

1: GXmlHttpクラスについて

2: 県庁所在地座標をロードして表示する

県庁所在地座標をロードして表示する

→サンプル

このサンプルは、以前の記事「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('./file/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では、自分が作成したデータを使って、いろいろな情報を地図上へ表示させることが可能です。

人気Javascriptランキング