Google Mapで走った距離を測ってみる

Q.
週に一回ジョギングをしているのですが、走っている距離がわかりません。どうしたら良いでしょうか？

A.
Google Map APIを使ってみてはいかがでしょうか？

ということで、今更ながらGoogle Map上で距離を測定するJavaScriptを作ってみることにしました。「Google Mapについては名前しか知らない＆JavaScript自体勉強中」という状態なので、プチ開発日誌として四苦八苦する様子も後述しておきます。

走った距離を測るJavaScript
走った経路をクリックしてください。地図を動かしたい場合はクリックしたままグリグリ。あと、デフォルトが私のジョギングコースなので、左端のズームバーをマイナスにずらして、お近くの地域を探してください。

プチ開発日誌

11:00-11:30
今回のネタを思いつく。調べてみたところ、Google Map APIを利用するためにはSign Upをする必要があるらしい。おそるおそる、ここでhttp://blog.japan.zdnet.com/komatsuを登録する。

11:30-12:00
Sign Up完了画面で表示されたサンプルJavaScriptを、このBlogに貼り付けてみる。すると、エントリー確認画面のURIが先に登録したhttp://blog.japan.zdnet.com/komatsuと異なるためエラーが発生。
しかたないので、投稿日を思いっきり古く（2007/1/12）して目立たないようにしてこっそり公開する。今度は、何も表示されなくなってしまってパニック。
どうやら古すぎると駄目（Blogシステム上、NG？）らしい気がするので、ほどほど（2007/9/9）にする。また、このBlogで使っているMovableTypeで改行を自動挿入してくれているらしく、その影響でJavaScriptが動かないので改行設定：なしに変更。サンプルGoogle Mapの表示を確認。

12:00-14:30
お昼ごはんを食べ、子供達と遊ぶ。今日は終日雨なので、クッションや布団などを組み合わせて滑り台っぽいのを作ってあげる。子供達にほめられる。

14:30-16:00
作業再開。走った経路をどう扱うか（表示・管理）で悩む。最初はJavaScriptで線を引いていこうかと思っていたが、Google MapのZoom In/Outで線の長さの意味が変わってきて面倒。
Google Map APIのドキュメントをぼーっと眺め、複数の連続した直線を扱うためのGPolylineというクラスを発見。他にも緯度・経度を取得する術があるらしいので、Google Map APIをフル活用することに決定。マウスでクリックした直近ポイントが見れないと不便なのでGMarkerというクラスも採用。
その後、デバッグの連続。FirebugというJavaScriptデバッガーにお世話になりっぱなし。

16:00-16:30
正月に弟から譲り受けたノートPC（Ecolinux-light(Ubuntuベース)インストール済み）をいじっていると、バッテリーが全然利いていないことに気がつく。どうやら過放電らしい。途方に暮れつつノートPC用バッテリーの情報を調べる。BIOSのアップデートを実施するも効果なし。とりあえず後回し。

16:30-18:00
クリックする毎に線が引けるようになったので、距離を計算するロジックを検討。この辺りから、子供達が体によじ登ってきてキーボードが打ち難くなる。
GPointクラスのdistanceFrom()というメソッドを発見。これでメートル単位で距離を取得することにする。大体できた。

18:00-20:00
お風呂を掃除して、お湯をはり子供達をお風呂に入れる。最近、お風呂ではしりとりがはやっている。まだ知っている単語が少ないので、それとなくヒントをあげるのだが、ヒントを考え続けてばかりで疲れてくる。晩御飯を食べる。

20:00-21:00
作業再開。全クリックポイントを消去するリンクの作成や、初期状態で写真＋地図が表示されるよう設定、などなど細々した修正を行い、一応完成。

21:00-
子供達に、「寝る前に読んで欲しい絵本」を選ばせる。厚めの本を選ぼうとしていたので、薄めの本を強くお勧めする。