Google Maps API を使ってみる（４）

Posted on by

またまた Google Maps API で遊んでみる。

今回は、あらかじめXMLファイルにマーカーの位置座標を入力しておき、
そのファイルを “XMLHttpRequest” で読み込んで表示してみた！

ちなみに、初心者向けに書いておくとこういうのをAjaxと呼んだりする。
私のサイトで少しだけ紹介してるので、Ajax未経験者は先に見ておくのも良いかも。
—–9/2追記——–
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
——————–


サンプル

すでに “XMLHttpRequest” は何度も使っていたこともあり、
非常に簡単だったので、前回・前々回のエントリーよりも先に出来ていたが、
何事も順序というものがあるわけであり、
マーカーを紹介した後に説明したかったので後回しにしました。

さらに今回は、”XMLHttpRequest” で読み込む為の”data.xml”も用意します。

では、早速解説しますが、序盤はいつも通りですね。

var request = GXmlHttp.create();

以降が今回のキモです。

まず、

var request = GXmlHttp.create();

で、”XMLHttpRequest” を使えるようにし、

request.open(“GET”, “data.xml“, true);

で、読み込むファイル名 “data.xml” を指定しています。

その後の

request.onreadystatechange = function() {…}

は、読み込み始めたら・・・ってことだと思って。

if (request.readyState == 4) {…}

は、指定したファイルの読み込みが完了したら・・・という意味。

var xmlDoc = request.responseXML;

で、読み込んだファイルをXML形式として変数xmlDocに代入してる。

var markers = xmlDoc.documentElement.getElementsByTagName(“marker“);

では、読み込んだファイルの”marker”タグを取得し、

for (var i = 0; i < markers.length; i++) {…}

のようにして、”marker”タグの個数分繰り返し処理をしている。

var point = new GPoint(parseFloat(markers[i].getAttribute(“lng“)), parseFloat(markers[i].getAttribute(“lat“)));

では、”marker”タグの属性”lng”と”lat”を取得して、GPointを作成している。
そして、

var marker = new GMarker(point);
map.addOverlay(marker);

で、マーカーを作成・表示している。

表示するものをマーカーでは無くてラインにすれば線も引けるだろうし、
data.xmlファイルを書き換えるだけでマーカーの位置が変えられるので、
何かと便利に使えそうですね。

One thought on “Google Maps API を使ってみる（４）”

  1. XMLデータをアクセスする方法

    XML形式の電子データに色々な情報を格納し、 情報を多目的に利用したいというニーズは多いことでしょう。 XMLは、文書コンテンツ管理、デジタル出版、 ナレッジマ…