GoogleMaps/API/doc/Examples/14-UsingXMLのソース-N☆E 学習帳

*Using XML and Asynchronous HTTP with Maps
http://www.google.com/apis/maps/documentation/~
（Ver.2　：　Using XML and Asynchronous HTTP with Maps）
**Version 2 (2006.4)
>In this example, we download a static file ("data.xml") that contains a list of lat/lng coordinates in XML using the GDownloadUrl method. When the download completes, we parse the XML with GXml and create a marker at each of those points in the XML document.

>var map = new &font(Red){GMap2};(document.getElementById("map"));~
map.addControl(new GSmallMapControl());~
map.addControl(new GMapTypeControl());~
map.&font(Red){setCenter};(new &font(Red){GLatLng};(&font(Blue){37.4419};, &font(Lime){-122.1419};), &font(Red){13};);~
　~
　// Download the data in data.xml and load it on the map. The format we~
　// expect is:~
　// <markers>~
　//   <marker lat="37.441" lng="-122.141"/>~
　//   <marker lat="37.322" lng="-121.213"/>~
　// </markers>~
&font(Red){GDownloadUrl};("data.xml", function(data, responseCode) {~
　  var xml = &font(Red){GXml.parse};(data);~
　  var markers = xml.documentElement.getElementsByTagName("marker");~
　  for (var i = 0; i < markers.length; i++) {~
　　    var point = new &font(Red){GLatLng};(parseFloat(markers[i].getAttribute("lat")),~
　　　　                            parseFloat(markers[i].getAttribute("lng")));~
　　    map.addOverlay(new GMarker(point));~
　  }~
});

HTTP Request の通信でのステイタス確認の部分を GXml Class で吸収したようですネ。

↓　data.xml：
><markers>~
　<marker lat="37.427770" lng="-122.144841" /> ~
　<marker lat="37.413320" lng="-122.125604" /> ~
　<marker lat="37.433480" lng="-122.139062" /> ~
　<marker lat="37.445427" lng="-122.162307" /> ~
</markers>



**Version 1
（Ver.1　：　Using XML and Asynchronous RPC("AJAX") with Maps）
 // Center the map on Palo Alto
 var map = new GMap(document.getElementById("map"));
 map.addControl(new GSmallMapControl());
 map.addControl(new GMapTypeControl());
 map.centerAndZoom(new GPoint(-122.141944, 37.441944), 4);
 
 // Download the data in data.xml and load it on the map. The format we
 // expect is:
 // <markers>
 //   <marker lat="37.441" lng="-122.141"/>
 //   <marker lat="37.322" lng="-121.213"/>
 // </markers>
 var request = GXmlHttp.create();
 request.open("GET", "data.xml", true);
 request.onreadystatechange = function() {
   if (request.readyState == 4) {
     var xmlDoc = request.responseXML;
     var markers = xmlDoc.documentElement.getElementsByTagName("marker");
     for (var i = 0; i < markers.length; i++) {
       var point = new GPoint(parseFloat(markers[i].getAttribute("lng")),
                              parseFloat(markers[i].getAttribute("lat")));
       var marker = new GMarker(point);
       map.addOverlay(marker);
     }
   }
 }
 request.send(null);

data.xmlの中身（２つめの値の緯度が地図の外側のため、マーカーは３つ表示されます）
 <markers>
   <marker lat="37.427770" lng="-122.144841"/>
   <marker lat="37.413320" lng="-122.125604"/>
   <marker lat="37.433480" lng="-122.139062"/>
   <marker lat="37.445427" lng="-122.162307"/>
 </markers>

ここでgooglemapsを呼び出す。XMLファイルからデータを取り出し表示する。
 var request = GXmlHttp.create();

----
(2005.12)
>In the following example, we download a static file ("data.xml") that contains a list of latitude and longitude coordinates in XML. When the download completes, we parse the XML and create a marker at each of the specified locations.~
　~
Note: If the XML file includes HTML code, be sure to encode the HTML appropriately in the XML file. For example, change all occurrences of "<" in the HTML tags in the XML file to "＆lt;", then convert them back in your JavaScript code after dlownloading the XML file. (The XML file used by the following example doesn't include any HTML, so it doesn't need any encoding or decoding.) 

例題スクリプトは経度緯度が小数点以下4位に変更
----
**onreadystatechange
&font(b){参考};~
http://tomizawa-web.hp.infoseek.co.jp/event/onreadystatechange.htm~
http://www.utj.co.jp/xml/dev/dom/dxdom4_1.html~
http://allabout.co.jp/career/javascript/closeup/CU20050515A/

&font(b){説明};~
オブジェクトの準備の状態を変更する時のイベントハンドラを設定するか検索します。

&font(b){構文};~
object.onreadystatechange=eventHandler

**readyState
&font(b){参考};~
http://tomizawa-web.hp.infoseek.co.jp/property/readyState.htm~
http://jsgt.org/mt/archives/01/000278.html

&font(b){説明};~
オブジェクトの準備の状態を検索します。

&font(b){構文};~
object.readyState

&font(b){返り値};~
0（初期化されていない）~
1（読み込み中）~
2（読み込み完了）~
3（操作可能）~
&font(Red){4（準備完了）};

**documentElement
&font(b){参考};~
http://tomizawa-web.hp.infoseek.co.jp/property/documentElement.htm

&font(b){説明};~
documentオブジェクトのルート上のトップレベルのドキュメントエレメントを表すdocumentElementオブジェクトを返します。

&font(b){構文};~
object.documentElement

&font(b){返り値};~
documentElementオブジェクトの参照を返す。

**getElementsByTagName
&font(b){参考};~
http://tomizawa-web.hp.infoseek.co.jp/method/getElementsByTagName.htm~
↓下記の本

&font(b){説明};~
オブジェクトの指定されたタグの名前のエレメントオブジェクトのコレクションを獲得します。

&font(b){構文};~
object.getElementsByTagName('tagName')

&font(b){引数};~
tagNameはタグの名前を指定。

&font(b){返り値};~
オブジェクトの参照を返す。

**getAttribute
&font(b){参考};~
http://www.microsoft.com/japan/msdn/library/default.asp?url=/japan/msdn/library/ja/jpisdk/dhtml/references/methods/getAttribute.asp~
↓下記の本

&font(b){解説};~
指定した属性の値を読み出す。 

&font(b){構文};~
variant = object.getAttribute(attrName [, caseSensitive])

&font(b){戻り値};~
属性で定義された文字列、数字、論理値を返す。属性が無い場合には、nullを返す。 

#isbn(4798010049,left)
#clear

----
 markers.length 　オブジェクトの数
----
上記の実行~
http://never-ever.info/googlemaps/async.php　（別窓）