Google Maps APIが公開されたので早速遊んでみた。

なんか、面白いネタ無いかなぁと、散策してたところ、日本で地図ソフトといえば、Fland。Flandのページをうろうろしてたら、 日本世界地名データ・緯度経度データ なんてものを発見。丁度ええ教材だべ。ということで、こいつを人工衛星写真の上にぶちまけてみた。

こちらで試せる。

日本の人工衛星写真の上に散らばっているのが、各都道府県のマーカーである。
その都道府県マーカーをクリックすると、その都道府県が拡大され、対応した市区町村マーカーが、ぶちまかれる。
市区町村マーカーが表示されているときに、マーカーをクリックすると、市区町村名がポップアップで表示される。
縮小していけば、再び、都道府県のマーカーに切り替わる。

まぁ簡単なプログラムである。

こいつには、ちょっとだけ欠点があって、ちょっと処理が重い。送受信しているデータ量はたいしたことないんだけど、アイコンをぶちまけているところが、ちょっとだけ重い。とある都道府県には、300近くの市区町村があって、こいつをぶちまけるのに時間がかかる。FireFoxでは、”A script on this page is causing mozilla to run slowly.”と怒られるし、IEに至っては、ハングしたように見える。待ってれば帰ってくるのでご心配なく。というか、その都道府県以外は普通に動いてるので。。。
それ以外は、なんとなくそれっぽく動いていると思う。

Google Mapsには、日本の地図が整備されていないので、日本の人工衛星写真を見るときに、YahooMapsからGoogleMapsへ変換してみたり、結構面倒だった。しかし、こいつのおかげでだいぶ楽になった。

こいつのサーバー側のソースコードもまとめてここに置いてある。
実際にこいつを動かす場合は、
適当なWebサーバ
Perl
Perl用XML DOMのモジュール
Flandのページの日本世界地名データ・緯度経度データ のうち、日本都市というフォルダの中身
自分で取得した Google Maps API Key
が必要である。

さて、こいつについてのメモ。

Google Maps APIのサイトに行って、Sign up for a Google Maps API keyをつついて、API Keyを取得しなければならない。
このAPI KeyはURLのフォルダごとに異なるようである。すなわち、http://www.cagylogic.com/ で取ったAPI Keyと、http://www.cagylogic.com/googlemaps/ で取ったAPI Keyは異なる。違うAPI Keyを違うフォルダで使うと、Googleからエラーメッセージが出る。
というか、フォルダごとにAPI Keyを取らなきゃだめなので面倒である。そのうえ、http://localhost/googlemaps/ でアクセスしても違うURLになるので、だめって言われる。

Google Maps APIという名前からSOAPなどを想像しがちだが、実は、Java Scriptのクラスライブラリである。
地図の表示、マーカー、ふきだしの機能だけでなく、GXMLHttp,GXml,GXsltなどのXML関連のcross-browserクラスが提供されていたりする。Ajaxやるときに頭の痛い、ブラウザ間の互換性問題を一部だけども助けてくれる。

Flandのページの日本世界地名データ・緯度経度データ は、座標を、度分秒であらわされていて、GoogleMapsの座標は度単位の少数で表しているのでちょっと変換が必要。

APIは非常に良くできている。非常に簡単。まぁ細かいことはできないけど、ちょっとしたアプリを書くには十分だろう。
ふきだしが出るときに画面からはみ出しそうになると、自動的にゆっくりスクロールするなんて芸が細かい。

データを持ってきて、ちょっとプログラムを書けばこれだけのことができてしまうので非常に便利である。

ふきだしの大きさのかえかたがよくわからん。

300ばかしのマーカーをXMLから情報を取り出して、ぽいぽいぶちまけるだけなのに、思いのほか重い。どこが重たいんやろか。
そういえば、
function addMarkerAt( title, preCode, lng, lat)
の中で、preCodeという変数だけど、このfunctionのなかで、GEventに対して、コールバックを指定してるんだけど、そのコールバックの中でもpreCodeって使ってるな。これって、自分で書いておいて、なんなんだけど、なんで、preCodeがちゃんと正しい値になるんだろう。まだまだJavaScriptについてよくわかってないんだよなぁ。

追記(2005/07/04/01:00:00)：
Google教授に聞いたところ、Hawk’s W3 LaboratoryのJava Script 深層に詳しい解説を発見。
スコープチェーンと変数のスコープ(2)が、まさに該当の例。
functionがスタックではなく、オブジェクトとして考えなければいけない、プロトタイプ型オブジェクト指向。

Flandのページの日本世界地名データ・緯度経度データ の中には、ベクトルデータもいくつか入ってるし、GPolylineなんてクラスも見つけたので、今度はベクトルでも書いてみようかな。やっぱり重たいかな。