昨日のエントリーで,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/