Flickrの写真をGoogle Mapsにオーバーレイ

昨日のエントリーで，Flickrにアップロードした写真に地理情報のタグである，Geo tagを与える簡単な方法を紹介しましたが，この与えたGeo tagを使って，自分のサイトのGoogle Mapsにポイントとしてオーバーレイする方法を紹介します。もちろん適用する場合は，Flickrのアカウントを取得し，API keyを取得しておく必要があります。

方法を簡単に説明すると，Javascriptを用いて，Flickr APIを使って自分のアカウントの写真の情報をJSONの形式で抽出して分解し，Google Maps APIを使用して地図上のプロットということになります。

Flickr APIのうち，flickr.photos.searchを使います。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=「API Key」user_id=[User ID]

この「API Key」と「User ID」を取得したものを入れ，JSONフォーマットのためのURLの末尾に「&format=json」を付けると，私の場合は，

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=e0c65155a65b79c9a6c9bd0776908bb3&user_id=7593934@N02&format=json

となり，結果はこちらとなります。横長のテキストが帰ってきます。ここにアップロードした情報が含まれているんです。そして，Geo tagを付けたものだと，こちらになります。一応，XML形式だとこんな感じ(Geotagのない写真は緯度経度が0になるようです)。緯度経度が含まれているのがわかります。他の情報も抽出できるので，詳しくはflickr.photos.searchのページを参照してください。

で，今回はJSONで呼び出しているので，クロスドメインの問題はなく，Javascriptで簡単に情報を抽出できます。それを，Google Maps APIでポイントとしてオーバーレイするわけです。試作したサイトは，

Flickr API + Google Maps API
http://www.tagchan.net/flickr_map.html

です。JSファイルは，こちらです。JSファイルはご自由にお使いください。なお，Google Maps APIを使っている部分は，私のホームページのトップにある地図と同じで，吹き出し内に写真を表示できるようにし，地図の外にはオーバーレイしたポイントをリスト表示しています。

Flickr+Google Mapsだとgeotagr!というのがありますが，これは写真の表示は別サイトで「あちら側」のまま。今回の方法だと，自分のホームページ上で写真地図を気軽に表示できるため，気分としては「こちら側」とすることができます。

＜参考にさせていただいたサイト＞
・JSON Response Format (Flickr)
http://www.flickr.com/services/api/response.json.html

・kajidaiの日記 - FlickrAPIがJSON対応
http://d.hatena.ne.jp/kajidai/20061002/1159811459

・第2回　JavaScriptからFlickr APIで画像検索：ITpro
http://itpro.nikkeibp.co.jp/article/COLUMN/20061101/252356/