Google Maps API 使って、Googleのマップに使いやすい機能いくつかくっ付けたり、ハンチングクリップと連動させてみたりするハンチングマップっていうの作ってみました。

ハンチングマップには3つのモードがあります。モードの選択は左上タイトルの下にある3モード名各リンクをクリックしてください。基本的にマップ表示部分は共通で、そのマップ上に配置する赤いマーカーの置き方や情報表示内容が変わる感じです。3モード各々で作成したマーカー情報を他のモードで共有、上書きすることも可能ですので、詳しくは後述しますが、「検索モードで検索した地点と、クリップマーキングモードでマークされた地点間の距離を算出する」なんてことも可能になります。

あと、一応、動作確認はIE6.0とFirefox1.5でやってますのでその辺のブラウザだったら動くんじゃねーかなあ。JavaScriptはONでお願いします。

それから共通のマップ操作として、ドラッグでマップ移動、ダブルクリックでクリック地点をマップ中心に移動、マウスホイールを奥に回すと拡大、手前に回すと縮小、って感じです。

画面開いたときに設定されてるのが地名検索モードです。入力フォームエリアにはテキスト入力フォームとボタンがあります。

テキスト入力フォームに地名、または住所を入れると、その情報から場所を特定し、その場所を下の地図にマーキングします。

この「地名、住所から場所を検索する」という機能は、Geocoding REST API を使わせてもらって実現しています。ので、位置特定の仕様などはこのAPIに依存します。このAPI（というかCGI）へはハンチング側サーバに用意したPerlの簡単なゲートウェイスクリプトを使ってアクセスしています。

地名の指定は基本的に「渋谷」とか「新宿」とかのレベルで検索すると、まあいい感じに特定されます。住所の指定は住所全部を完全指定すると、かなりピンポイントでマーキングされるので便利だと思います。入力したら検索ボタンで検索開始、検索が完了するとマップ上にその位置がマーキングされます。

また、指定した地名によっては複数の候補があがることがあり、その場合は入力フォームの場所に候補地名がセレクトボックスでリスト表示されますので、リストから候補を選んでください。選択と同時に再度検索が行われます。

該当する地名や住所が存在しなかった場合にはエラーとしてアラートが表示されるので、その場合は対象の地名を変更してみたりしてください。

検索を複数重ねていくと前回以前のマーキングポイントもそのまま引き継いでマップ上に配置されてます。マーキングをクリックすれば閉じられたバルーン表示も再度表示されるようになります。

クリアボタンを押すとマップ上のマーキングが全て消去されます。（他モードで作成されたマーキングも消去されます。）

それから、この地名検索モードの場合はGETパラメータによる表示時検索結果表示も可能です。qパラメータにURLエンコードされた地名、住所を渡すことでページを開くと同時に検索が開始されます。これを使用して、ハンチングクリップから該当クリップの位置情報をハンチングマップに表示するリンクが機能しています。

マップ上に始点から経由するポイントを追加していくことでポイント間の直線距離、始点からの積算距離をバルーンで個々に表示させられます。

まず、マップ上の始点としたい場所でダブルクリックし、その場所をマップ表示中心に持ってきます。その位置が中心に来たらポイント追加ボタンを押すと始点のマーキングがされます。始点のマーキング時はバルーンで情報が表示されます。

以降、計測したい経路にしたがって同様にポイントを追加していきます。始点以外はマーキング時のバルーン情報表示はありませんが、マーキングをクリックすると表示されます。また、マーキング同士はマーキング順に従って赤線でトレースされ、最後のマーキングポイントからはマップ中心点（次の経由位置）に対してオレンジのトレース線がマップの移動に追従するカタチで表示されますので位置特定の参考にしてみてください。

マップ中心点がマーキングポイントになるので経由したい場所を特定したらダブルクリックするとその場所が中心に移動するので便利だと思います。ポイント追加ボタンにフォーカスが残っていれば、キーボードのEnterキーを押すことでマーキングが出来るので、「経由位置でダブルクリック→Enterキーでマーキング」を繰り返すことで経由点のマーキングが手早く出来ると思います。

目的地までマーキングが完了したら、目的地のマーキングをクリックするとバルーンで情報が表示されます。（他の経由位置マーキングをクリックしても同じようにバルーン表示が出ます。）　ポイント番号、座標、前ポイントからの距離、始点からの積算距離、あと、徒歩での所要時間が表示されます。徒歩での所要時間表示は、80mを1分で歩くスピードで算出され、1日は8時間歩き続けることを想定した結果になってます。

ってか、駅前の徒歩移動のだいたいの所要時間把握とかなら参考にはなると思うけど、数時間以上の徒歩移動時間なんてネタみたいなもんです。まあ、終電逃したらどんくらい歩くハメになるか（いつまでも学生気分で。）とか、震災あった場合に交通機関使わずに家まで帰るのは徒歩でドンくらいかかるかとか勝手に想像しながら遊んでください。PCのスペックに依存しますが500ポイントくらいマーキングしても一応動いた。

クリアボタンを押すとマーキングが全て消去されます。

まあ、そもそもコレがやりたくって Google Maps API 触ったわけなんですが。

コレは今までハンチングクリップで俺がクリップし貯めた情報を一気に日本地図上に広げたらオモシロいかなーという話です。ハンチングクリップへ写メールを投稿するときに大まかな位置情報をコメントとして付けていた住所から位置を割り出してGoogle Maps 上に配置します。

ハンチングクリップのログデータの各位置情報を住所として座標に変換するに際し、CSVアドレスマッチングサービスを利用させて頂いて、変換結果としてのCSVファイルをGXmlHttpで触れるようにしたかったんでCSVを一旦、Excelに取り込んでXMLスプレッドシートとしてかなりチカラ技でXMLデータ化しました。

まず、モード変更すると入力フォーム部に件数表示のセレクトボックスがあります。これは一度に表示するクリップの数を指定します。その次にそのクリップ件数ごとにまとめられたクリップ全件の各先頭日時がリストされたセレクトボックスがあります。このセレクトボックスはクリップ件数リストの選択が変更された場合に動的にリスト単位が変更されて反映されるようになるので、モード変更直後時にはセレクトボックスフォーム自体の表示が少し遅れて行われるかもしれません。

クリップ表示件数、その件数ごとにリストされた表示したい日時を選択したら表示ボタンを押すことで、選択クリップのマーキングが一気に地図に展開されます。（指定されたクリップ件数によっては時間がかかるかもしれません。表示ボタンが凹んだままになってるときは処理中だと思ってくださいな。）

件数単位で表示されるごとに、各クリップのマーキングがクリップされた時間順にトレース線で結ばれてます。また、このトレース線は表示ごとにランダムでカラフルに変わるようになってます。

各マーキングをクリックするとクリップ内容がバルーンで表示されます。中には同じ場所で複数のクリップがある場合にはバルーンの中にスクロールバーが表示されてスクロールして見ることが出来るようになっています。

PC環境によりますが、調子に乗って100件のクリップを一気に表示させたりするとブラウザが必死になってたりするので、様子見ながら件数を調整して見ていったほうがいいと思われます。

バルーンの中に表示されているクリップ写真をクリックすると別窓で該当のハンチングクリップ内容が表示されるようになってます。クリップ写真も拡大されて見られますので気になるクリップ内容の場合はクリックして開いてみてください。