GoogleMapSample7:XMLと非同期RPC(“AJAX”)の利用

17年前

サーバー上にあるＸＭＬファイルを読み込んでマーカーを表示する。
公式サンプルそのまま。

window.onload = function() {

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.centerAndZoom(new GPoint(-122.1419, 37.4419), 9);

var request = GXmlHttp.create();
request.open('GET', 'data7.xml', true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
var xmlDoc = request.responseXML;
var markers = xmlDoc.documentElement.getElementsByTagName("marker");
for (var i = 0; i &lt; 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("");
}
}

<div id="map"><!--GoogleMap--></div>

<markers>
<marker lat="37.441" lng="-122.141">
<marker lat="37.322" lng="-121.213">
</marker>

var request = GXmlHttp.create();
通信用のオブジェクト（インスタンス）を作成。ブラウザごとに処理を分けてくれる。

request.open('GET', 'data7.xml', true);
指定されたファイルをオープン。

request.onreadystatechange = function()
通信用のオブジェクトの状態（readyState）が変化したら実行

if (request.readyState == 4)
もしreadyStateが４（準備完了）なら実行

var xmlDoc = request.responseXML;
レスポンスを XML DOM 形式で取得して変数に格納。responseTextでもＯＫ。

var markers = xmlDoc.documentElement.getElementsByTagName("marker");
markerタグを取得してmarkersに格納。配列になる。

for (var i = 0; i < markers.length; i++)
markersに格納されてるmarkerタグの数だけ繰り返す

parseFloat(markers[i].getAttribute("lng"))
parseFloat(markers[i].getAttribute("lat"))
markerタグの属性lng・latの値を、数値に変換（parseFloat）しつつ代入。

request.send("");
GXmlHttp.create()とセット。データを送信しない時でも必要。
nullだとOperaで差し支えあるらしいので””とする。

シェア