Geolocation APIを使ってみた(その2）

Geolocation APIと各種の位置情報サービスを組み合わせると、現在位置周辺の各種の情報を得ることができます。
その例として、現在位置周辺でFoursquareに登録されている場所を調べて、地図に表示する例を作ってみました。

今回の例では、FoursquareのAPIを利用して、現在位置周辺の情報を得ています。
ただ、FoursquareのAPIがJSONPに対応していないため、中継用のCGIを介して情報を得るようにしました。

HTML／JavaScript／CGIのファイルは以下からダウンロードすることができます。

お使いのサーバーにアップロード先のディレクトリを作った後、ダウンロードしたZipファイルを解凍して、中身のファイルを先ほど作ったディレクトリにアップロードします。
そして、アップロードしたファイルの中で、「4sqvenues.cgi」のパーミッションを705等に変えて、実行可能にします。

アップロードが終わったら、Geolocation API対応のWebブラウザで、「http://アップロード先ディレクトリ/4sqmap.html」にアクセスします。
すると、地図の中心に現在地が表示され、その周囲でFoursquareに登録されているスポットも表示されます。

仮に、東京タワーで地図を見たとすると、以下のような表示になります。
なお、以下の画面はビットマップなのでクリックしても反応しませんが、実際にはスポットのアイコンをクリックするとそこの情報が表示されます。

今回はFoursquareを例に取り上げましたが、他の位置情報サービスと組み合わせれば、いろいろな展開が考えられると思います。

お知らせ