XMLファイルの取得

次はXML形式のファイルを用意し、ダウンロードして利用してみます。次のようなXMLファイルを用意しました。

<?xml version="1.0" encoding="UTF-8" ?>
<markers>
  <marker>
    <lat>41.796864</lat>
    <lng>140.756965</lng>
    <name>五稜郭</name>
  </marker>
  <marker>
    <lat>41.766711</lat>
    <lng>140.717783</lng>
    <name>赤レンガ倉庫</name>
  </marker>
  <marker>
    <lat>41.772596</lat>
    <lng>140.725261</lng>
    <name>函館朝市</name>
  </marker>
</markers>

まずは読み込んだデータをノードに分解します。Goolge Maps APIで用意されているGXml.parseメソッドを使います。

GXml.parse(xmltext:String)

指定された文字列を XML テキストとして解析し、DOM 表現を返します。ブラウ
ザが XML 解析をネイティブでサポートしない場合、これは空の DIV 要素の 
DOM ノードを返します。

戻り値：
  Node

XML形式の文字列データを引数として指定すると、DOMオブジェクトに変換したものを取得できます。

function createMap(xmldata, statusCode){
  var xml = GXml.parse(xmldata);
}

今回のデータでは、1つの地点に関する情報をmarkerノードとして記述しています。そこでDOMオブジェクトからmarkerノードの集合を取得します。

function createMap(xmldata, statusCode){
  var xml = GXml.parse(xmldata);
  var markers = xml.documentElement.getElementsByTagName("marker");
}

それぞれのmarkerノードにはlatノード、lngノード、nameノードが含まれています。

function createMap(xmldata, statusCode){
  var xml = GXml.parse(xmldata);
  var markers = xml.documentElement.getElementsByTagName("marker");
  
  for (var i = 0; i < markers.length; i++) {
    var lats = markers[i].getElementsByTagName("lat");
    var lngs = markers[i].getElementsByTagName("lng");
    var names = markers[i].getElementsByTagName("name");
  }
}

各ノードからテキストを取得するにはGoolge Maps APIで用意されているGXml.valueメソッドを使って取得できます。

GXml.value(xmlnode:Node)

DOM 表現で指定された XML ドキュメント フラグメントのテキスト値 (つまり、
プレーン テキストのコンテンツのみ) を返します。

戻り値：
  String

具体的には次のように記述します。

function createMap(xmldata, statusCode){
  var xml = GXml.parse(xmldata);
  var markers = xml.documentElement.getElementsByTagName("marker");
  
  for (var i = 0; i < markers.length; i++) {
    var lats = markers[i].getElementsByTagName("lat");
    var lngs = markers[i].getElementsByTagName("lng");
    var names = markers[i].getElementsByTagName("name");

    var lat = parseFloat(GXml.value(lats[0]));
    var lng = parseFloat(GXml.value(lngs[0]));
    var name = GXml.value(names[0]);
  }
}

後は取得した座標や名称に応じて必要な処理を行います。

サンプルプログラム

では試してみます。

code3_1.js

var map;

function initialize() {
  if (GBrowserIsCompatible()) {
    map = new GMap2(document.getElementById("map_canvas"));
    map.setCenter(new GLatLng(41.782737,140.738897), 13);

    GEvent.addListener(map, "click", clickAction);
  }
}

function downloadData(){
  GDownloadUrl("data.xml", function dispData(data, statusCode){
    var xml = GXml.parse(data);
    var markers = xml.documentElement.getElementsByTagName("marker");

    for (var i = 0; i < markers.length; i++) {
      var lats = markers[i].getElementsByTagName("lat");
      var lngs = markers[i].getElementsByTagName("lng");
      var names = markers[i].getElementsByTagName("name");

      var lat = parseFloat(GXml.value(lats[0]));
      var lng = parseFloat(GXml.value(lngs[0]));
      var name = GXml.value(names[0]);

      map.addOverlay(createMarker(lat, lng, name));
    }
  });
}

function createMarker(lat, lng, name) {
  var marker = new GMarker(new GLatLng(lat, lng));

  var html = "<p>" + name + "</p>";
  GEvent.addListener(marker, "click", function(){
    marker.openInfoWindowHtml(html);
  });

  return marker;
}

map3_1.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>サンプル：XMLファイルの取得</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=(key)&sensor=false"
            type="text/javascript" charset="utf-8"></script>
    <script src="./js/code3_1.js" type="text/javascript"></script>
  </head>
  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 400px; height: 400px"></div>

    <form>
    <p>
    <input type="button" id="btn" value="ダウンロード" onclick="downloadData()" />
    </p>
    </form>

  </body>
</html>

data.xml

<?xml version="1.0" encoding="UTF-8" ?>
<markers>
  <marker>
    <lat>41.796864</lat>
    <lng>140.756965</lng>
    <name>五稜郭</name>
  </marker>
  <marker>
    <lat>41.766711</lat>
    <lng>140.717783</lng>
    <name>赤レンガ倉庫</name>
  </marker>
  <marker>
    <lat>41.772596</lat>
    <lng>140.725261</lng>
    <name>函館朝市</name>
  </marker>
</markers>

ではブラウザで上記のURLを見てみます。

p3-1

地図下の「ダウンロード」ボタンを押すと、サーバからXMLファイルを取得し、ファイルに書かれていた3つの地点にマーカーを設置します。

p3-2

マーカーをクリックすると、その地点の名称が記載された情報ウィンドウを表示します。

p3-3

( Written by Tatsuo Ikura )

Profile

著者 / TATSUO IKURA

プログラミングや開発環境構築の解説サイトを運営しています。