GoogleMap を利用した地図ソリューション 『現在地から一番近いコンビニはどこ?』


サンプルでは、表参道駅を中心として近隣にあるコンビニのデータを20件作成しています。
データはXMLで記述します。(XMLの内容はこちらを参照)。

サンプルなので装飾等はほとんど無しに作成しており、独自のWEBサービスとして実装する場合はこれらをテンプレートにしてカスタマイズの必要があります。

携帯からテストする場合、実際に表参道付近にてサンプルを見てみないとマークは画面上に現れません。
例えば沖縄や北海道、はたまたハワイで携帯電話からサンプルを見てみても実際の測地計算はしますが、あまりに遠いため表示地図にマークが出ません。

コンビニデータでしたら Google の GEOサーチでも同等なことが出来るんですが、より特化したデータや、常に変化するリアルタイムデータで利用すると面白いと思います。

このソリューションの問い合わせはこちらへどうぞ。

2012/11
Static Maps API V2 に合わせて修正しました。(若干移動のスケールが変ですが…)
Google Maps Javascript v3 を利用したバージョンも作成しました。

表示サンプル

実際に表参道駅で携帯のGPS機能を利用して地図を表示すると下記のように表示します。
近隣のコンビニ所在地データから一番近い5件を近い順にA~Eとしてマークします。

使い方:
「東西南北」は、スケールに合わせて地図を移動します。
「詳細」~「広域3」は地図のスケールを変更します。
「最初に戻る」は、初期の表示に戻ります。
「A」~「E」のリンクをクリックすると、その場所を中心とした地図を表示します。(スケールは保持)
( [251m](4):←計算結果の距離とデータインデクスを表示)


同じデータを「渋谷駅」を中心として表示するとこのようになります。
(明治通りより西側のデータは作成していないので検索されません)

GPSを利用し携帯で実際に動かしてみるサンプル

表参道や渋谷に行く機会がありましたら、携帯GPS機能を利用して実際に動かしてみることができます。
(まぁ他の地域でも動かすことは可能ですが…)
下記のリンクを携帯のブラウザから表示してみて下さい。

http://jjworkshop.com/gps/complete_sample/mapMain.cgi

GPSにて測地できる場合は「現在位置地図」ボタンを押下すると現在位置の地図に近隣のコンビニ所在地データをマッチさせ処理します。

GPS機能が利用できる、Docomo/Softbank/au の携帯で利用できます。
キャリアは自動判定します。
PCはブラウザからGPS情報が取得できないので稼働しません。

携帯で見る地図はサンプルのため 240×240 に固定していますが、これらは可変パラメタとなっているので変更は可能です。

上記のサンプルを全て Javascript だけで実装すると


上のサンプルは Google Static Maps と CGI を利用していますが、それを Google Maps Javascript API v3 を利用し CGI を利用せずに全て Javascript で実装してみました。
(Static Map でも実装可能です)
データは同じものを利用していますが、データ形式は XML から JSON に変更しています。
今時のスマートフォンならこちらの実装の方がスマートですね。

参考資料等

この測地計算は「ヒュベニの距離計算式」にて2点間の距離を計算しています。
参考資料:http://yamadarake.web.fc2.com/trdi/2009/report000001.html
ものすごく精度のある手法ではありません。(というか携帯電話の測地もそれほど正確でない場合もある)

キャリアのGPS情報を取得する方法は、各キャリアのデベロッパページにあったと思いますが、Googleで探しても簡単にヒットするんで、下記のようなサイトを参考にすると良いかと思います。
参考資料:http://itpro.nikkeibp.co.jp/article/COLUMN/20080703/310053/
まぁそれぞれ測地系が違ったりすると変換しなきゃですけど…

XMLデータで利用する緯度経度の情報は Google Map を利用して簡単に調査できます。
対象となる場所を探し、右クリックで「この場所について」を選択すると検索文字入力フィールドに緯度経度を明示してくれます。


Powerd by Google.