Nakajiman Software Blog: GGeoXml を使って Atom+GeoRSS を Google マップに表示してみる

GeoRSS を付与した Atom Feed (Atom Syndication) を Google Maps API の GGeoXml を使って読み込むと、Google マップにエントリの内容を表示できるらしい。ので、さっそく実験してみました。

次のスクリーンショットのように、エントリの位置にマーカーが、エントリの内容が吹き出しに表示されます。実例は GGeoXml を使って Atom+GeoRSS を Google マップに表示してみるから見てください。

JavaScript コードは次のとおりです。Atom Feed の URL を指定して GGeoXml を生成し、それをオーバーレイとして GMap2 に追加するだけです。Atom Feed の内容は、このエントリの末尾に記載しておきます。

なお、GGeoXml を使って読み込んだ Atom Feed は Google 側でキャッシュするようです。ですので、実例では Atom Feed の URL にバージョン番号相当を付与して、キャッシュを防止しています。

<script type="text/javascript">
//<![CDATA[ 

var map;
var geoXml;

// window.onload
window.onload = function() {
map = new GMap2(document.getElementById('map'));
map.setCenter(new GLatLng(35.689718, 139.691699), 4);

geoXml = new GGeoXml("http://developmentor.lrlab.to/google/geoxml-feed.xml?8");
map.addOverlay(geoXml);
}

//]]>
</script>
<div id="map" style="width:640px; height:480px;"></div>

マーカーの位置である緯度経度は entry/georss:point で決まります。

吹き出し中の見出しのテキストは entry/title、リンク先は entry/link に対応します。

作成者は entry/author/name に対応します。作成者の横のホスト名は feed/link のホスト名のようです。少なくとも entry/link とは対応していません。理解が曖昧なので、今後の課題とします。

作成者の下は feed/summary に対応します。CDATA かテキストを使って XHTML/HTML を記述できます。

Atom Feed の内容は、次のとおりです。

<?xml version="1.0" encoding="utf-8"?>
<feed
xmlns="http://www.w3.org/2005/Atom"
xmlns:georss="http://www.georss.org/georss"
>
<title>日本</title>
<link href="http://developmentor.lrlab.to/google/geoxml.html"/>
<updated>2007-01-01T00:00:00Z</updated>
<id>0</id>

<entry>
<title>東京都</title>
<link href="http://www1.lrlab.to/google/geoxml.html?Tokyo"/>
<author>
<name>nakajiman/1</name>
<uri>http://example.com/1</uri>
</author>
<updated>2007-01-01T00:00:00Z</updated>
<id>1</id>
<summary><![CDATA[
トウキョウト<br />
とうきょうと<br />
Tokyo
]]></summary>
<georss:point>35.689718 139.691699</georss:point>
</entry>

<entry>
<title>沖縄県</title>
<link href="http://www2.lrlab.to/google/geoxml.html?Okinawa"/>
<author>
<name>nakajiman/2</name>
<uri>http://example.com/2</uri>
</author>
<updated>2007-01-01T00:00:00Z</updated>
<id>1</id>
<summary><![CDATA[
オキナワケン<br />
おきなわけん<br />
Okinawa
]]></summary>
<georss:point>26.212647 127.680938</georss:point>
</entry>

</feed>

現在 Postal Search Ajax API とは別に Postal Search RESTful API を検討しています。Atom Feed を配信の基本とし、そのデータの編集は AtomPub に準じるというのが、今のところの方針です。そのとき GeoRSS を使って緯度経度を付与するつもりです。