« HTMLでもトラックバック | メイン | サンフレッチェvsフィオレンティーナ観戦記（１） »
2005年7月22日
Google Maps API を使ってみる（４）
またまた Google Maps API で遊んでみる。今回は、あらかじめXMLファイルにマーカーの位置座標を入力しておき、
そのファイルを "XMLHttpRequest" で読み込んで表示してみた！
ちなみに、初心者向けに書いておくとこういうのをAjaxと呼んだりする。
私のサイトで少しだけ紹介してるので、Ajax未経験者は先に見ておくのも良いかも。
-----9/2追記--------
私のサイトで、Google Maps API のサンプル付き解説も徐々に作成・公開してます。
--------------------
サンプル
すでに "XMLHttpRequest" は何度も使っていたこともあり、
非常に簡単だったので、前回・前々回のエントリーよりも先に出来ていたが、
何事も順序というものがあるわけであり、
マーカーを紹介した後に説明したかったので後回しにしました。
まず、
その後の
そして、
表示するものをマーカーでは無くてラインにすれば線も引けるだろうし、
data.xmlファイルを書き換えるだけでマーカーの位置が変えられるので、
何かと便利に使えそうですね。
すでに "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);
で、マーカーを作成・表示している。map.addOverlay(marker);
表示するものをマーカーでは無くてラインにすれば線も引けるだろうし、
data.xmlファイルを書き換えるだけでマーカーの位置が変えられるので、
何かと便利に使えそうですね。
投稿者 ponpon : 2005年7月22日 18:01 | 【Google】
トラックバック
◇重複トラックバックはこっそり削除しますのでお気になさらないでください。
◇トラックバックスパムと判断しましたらサックリ削除いたしますのでご了承ください。
このエントリーのトラックバックURL:
このリストは、次のエントリーを参照しています: Google Maps API を使ってみる（４）:
» XMLデータをアクセスする方法 from かしらもんじ でぇ〜
XML形式の電子データに色々な情報を格納し、 情報を多目的に利用したいというニーズは多いことでしょう。 XMLは、文書コンテンツ管理、デジタル出版、 ナレッジマ... [続きを読む]
トラックバック時刻: 2005年8月17日 07:45
