ハンチングマップっていうの作った

-----
20101227 追記
食べログ店舗検索機能が追加になりました。食べログメニューを表示し任意の場所に地図の中心を合わせ、フォームの各条件を設定して表示ボタンを押すと、中心周辺の食べログに登録されている店舗情報がマーカーで表示されます。
マーカー前後表示機能が追加になりました。マーカーに表示されたバルーンの中の「←前 / 次→」のアンカーをクリックすると前のマーカーバルーン、次のマーカーバルーンに移動、表示がされます。
この場所以外削除機能が追加になりました。地名検索他でマーキングされたバルーンの中にある「この場所以外削除」アンカーをクリックすると、そのマーカー以外の画面のマーカーが全て削除されます。
-----

HuntingGirledCollective: ハンチングマップ

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件のクリップを一気に表示させたりするとブラウザが必死になってたりするので、様子見ながら件数を調整して見ていったほうがいいと思われます。

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

と、まあ、そんな感じで3モード別々の機能な感じなんですが、冒頭に前述したとおり、マップ上のマーキング情報は3モード共通になっているので、地名検索で検索したマーキングとクリップモードでマークされたマーキングを距離算出モードでどっちかを始点に、どっちかを目的地にとポイントすれば簡単に2点間の直線距離がわかったりとかできますので、うまいことやってヒマつぶし程度に遊んでみてください。

【参考にしたサイト】
・汎用 Google Maps API スクリプト KsGMap
・汎用 Google Maps API スクリプト KsGMap 開発日記
・Google グループ : Google-Maps-API-Japan

【参考にした本】
・Amazon.co.jp:Googleマップ+Ajaxで自分の地図をつくる本 Google Maps API徹底活用: 本
・Amazon.co.jp:入門 Ajax: 本
・Amazon.co.jp:AJAX Webアプリケーション アイデアブック: 本

-----
20060329 追記
ショートカット機能を追加しました。
指定地点、表示形式(ズームとマップモード)とコメントを含めたURLを生成して、リンクで直接その指定を表示させることが出来ます。

【使い方】

まず、マップで指定したい場所を特定します。地点をダブルクリックすることでマップ中心にその位置が移動しますので、その中央位置が指定場所ということになります。同時に、指定ズーム(縮尺)とマップモード(サテライトとか)も指定があれば表示したい状態にしておきます。

次に、その地点へのショートカットにコメントを入れたい場合にはマップの下にあるフォームのショートカットコメントフォームにコメント内容を書きます。(適当に作ったんで特に制限かけてないですけど、たぶん長いとうまく動かないと思うんで手短に) コメントの入力は任意です。コメント無しでもショートカットは作成できます。

ショートカット地点の指定、コメントが入力できたら、マップ下フォームにあるショートカット作成ボタンを押します。

すると、そのフォームの下にある大き目の入力フォームにURLが選択反転されたカタチで表示されますので、そのURLをコピーして貼り付けたりとかして使ってください。そのURLにアクセスすると、今指定した地点の指定した表示形式で、コメントがあればバルーンポップアップの中にそのコメントが入って表示されます。

-----
20091030 追記
Geocode選択機能を追加しました。
地名、住所から該当箇所を検索する場合にGoogle Maps API、Geocoding APIのGeocodeのどちらを使って地点検索するか選べるようになりました。
-----
20100310 追記
Google Maps API V3に移行しました。これに伴って一部機能が変更になってます。
・逆ジオコーダがGoogleオンリーになりました。
・GPS機能が追加になりました。(iPhone3GSなどのGPSから現在地追跡情報、現在地逆ジオコーダ情報を取得できます。)
・ハンチングクリップで方向情報があるデータからリンクすると、座標表示の横に地図リンクが表示され、押下すると地図全体が撮影方向を北に回転します。(CSS3使ってるのでIEじゃ動かないっす。)
-----
2010712 追記
ルート検索機能が追加になりました。地図上に2地点以上のマーキング指定がある場合にルート表示ボタンを押すと、その2地点、始点終点間のドライブルート検索結果を表示します。2地点以上のマーキング指定がある場合は始点終点間のマーキングを経由ルートとして検索します。
(経由ルートは最高8地点指定可能で8地点を越えた場合は直近の8地点のみ経由地としてルート検索を行います。)