« 千葉ヤクルト工場見学 | メイン | キッザニア東京 »

Google Maps APIでおでかけMap

さて、久しぶりのエントリ。このところ、仕事忙しいやら、いろいろで更新していなかったが、ちょっとネタができたので更新することにする。
odekake_map このBLOGで、おでかけMapのページを追加したのは、2004年11月30日だった。このころから、地図とBLOGをつなげておもしろいコンテンツにしたい、という意図はあったのだが、FLASH版だとなかなか更新もめんどうだし、いちいちおでかけする度にとても更新する気になれない。 さて、最近はそういうニーズにあわせて、地図のWebサービスを提供するところも増えてきた。たぶん一番有名なのはGoogle Map APIだろう。そもそもこのAPIの存在を最初に知ったのは、友人の作成したWorld Heritage Virtual Flightseeingを見たときだった。しかし、GoogleAPIだけでは、Ajaxにそれほど詳しいわけでもない私にはちょっと敷居が高いと感じていた。そのころ、このサイトでもなんどかネタをいただいているHiLog:GoogleAPIマッシュアップ、おでかけHiLogを設置で、KsGMapというスクリプトの存在を知る。このスクリプトを使えばGoogleAPIもずいぶんとっつきやすいものになる。便利なのは、Zマーキングといって、「同一の座標(同じビル)や近くの座標を1つのマーカーとしてまとめて表示する」機能。当サイトでもこのスクリプトを使うことにした。
さて、基本的な導入方法は、HiLogを参考にさせてもらったが、当サイトでの独自の工夫もすこし入れることにした。それらの工夫について、ここではもう少し細かく紹介することにする。
1.カテゴリナビゲーションの工夫
2.他の地図へ移動するための工夫
3.他の地図とこのおでかけMapをリンクするための工夫
4.GoogleAPI Ver2に対応
5.BLOGエントリとXMLデータを連動させる工夫
以下、順にもうすこし詳細に説明する。
1.カテゴリナビゲーションの工夫
KsGMapはさまざまなカスタマイズが可能だ。いろいろと試行錯誤をしているなかで、カテゴリナビゲーションにエリアを指定することで、選択時にそのカテゴリのアイコンがすべておさまるように自動的に地図を移動するオプションがあることに気づいた。
ksgmap_category_autoCentering = 1; //自動センタリング機能をONにする


2.他の地図へ移動するための工夫
KsGMapはいくつかの機能をプラグインで提供している。このサイトでも、Googleローカル(Ver1.02)、goo地図、 goo地図(路線)、Yahoo!地図、はてなマップなどへのリンクをマップ・リンクプラグインにより提供している。これを使えば、現在表示されているおでかけMapの表示している場所を別のメジャーな地図サイトですぐに表示できる。KsGMap同士のリンクならば、プラグインなしでも現在地やズームをそのまま移動できる。当サイトでもおでかけHiLogへのリンクでこの機能を使用している。

3.他の地図とこのおでかけMapをリンクするための工夫
上記の逆を提供するのが、移動コンソールプラグイン。これは、他の地図で表示した場所を、このおでかけMapに表示することで、データとして使用する経度・緯度の情報を得るために便利な機能だ。

4.GoogleAPI Ver2に対応
最近気がついたのだが、Google Maps API Ver.1が2006年11月第1週で終了するらしい。KsGMapを使っていれば、このバージョンアップも比較的簡単にできる。詳細はGoogle Maps API Ver.2 への変更方法を参考にすればよいだろう。

5.BLOGエントリとXMLデータを連動させる工夫
出来上がってしまえばそれほど複雑なことはやっていないのだが、この項目がもっともやりたかったカスタマイズである。この項目については、さらに詳しく述べる。
BLOGエントリを入れてから、別のところで管理している地図データを更新するのはなかなかにめんどうな作業だ。KsGMapを使えば地図に表示するデータはXMLファイルのデータとして保存している。このXMLファイルをBLOGエントリと同時に作成するのだ。
具体的には、以下のとおり。
5.1 Movable Typeに、keyvaluesというプラグインを追加する。
同様の機能を提供するMovableTypeのプラグインは多数あるが、他の機能でもよく使用させていただいているBrad Choateのプラグインを使うことにした。
5.2 おでかけMap用のアーカイブテンプレートを追加する。
この中身に、骨格となるXMLファイルを入れる。データを設定する<mapdata>タグのところだけは、上記のプラグインの提供する機能を使って以下のように記述する。また、テンプレートの出力ファイルのところに、XMLファイル名を記入しておく。
<mapdata>
<!-- カテゴリ -->
<category id="chiba" name="千葉エリア" lng="140.28442" lat="35.43158" />
<category id="tokyo" name="東京エリア" lng="139.78866" lat="35.70637" />
<category id="gunma" name="群馬エリア" lng="138.90014" lat="36.45884" />
<category id="kyoto-osaka-shiga" name="京都・大阪・滋賀エリア" lng="135.76080" lat="35.00075" />
<!-- アイテム -->

<MTArchiveList>
<MTEntries>
<MTKeyValues source="[MTEntryKeywords]">
<MTIfKeyExists key="name"><item id="<$MTEntryID$>" category="<MTKeyValue key="area">" name="<MTKeyValue key="name">" lng="<MTKeyValue key="lng">" lat="<MTKeyValue key="lat">" date="<$MTEntryDate format="%Y/%m/%d"$>" icon="<MTKeyValue key="icon">" entryurl="<$MTEntryPermalink$>" entryname="<$MTEntryTitle$>" address="<MTKeyValue key="address">" phone="<MTKeyValue key="phone">" photourl="http://<$MTBlogHost$><MTKeyValue key="photo">" /></MTIfKeyExists>
</MTKeyValues>
</MTEntries>
</MTArchiveList>
</mapdata>
5.3 BLOGエントリのキーワード領域に地図情報を書き込む。
これで、おでかけMap用のテンプレートにより、自動的にXMLファイルが作成される。記述フォーマットは次のようなものだ。このデータ項目はもっと工夫すればいろいろできるだろうが、とりあえず最低限のものにとどめた。
area=chiba
name=佐倉草ぶえの丘
lng=140.21386
lat=35.74789
icon=play
address=千葉県佐倉市飯野820
phone=043-485-7821
photo=/photos/060503kusabue/060503kusabue1.jpg
これでBLOGエントリ毎に地図が更新される。これからはおでかけしたところをバンバンこのおでかけMapにマッピングしていこうとおもう。 旧おでかけMapも、もう更新することはないだろうが、一応このリンクで参照することもできるようにしておく。

トラックバック

このエントリーのトラックバックURL:
http://mattani.xrea.jp/mt32j/mt-tb.cgi/185

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)