Flickr API + Google Maps API

Work > Flickr API + Google Maps API

Flickr API + Google Maps API

2008年1月25日公開
2009年1月1日リニューアル

はじめに

Flickrでは位置情報（ジオタグ）が付与された写真の取り扱いが可能です。 Flickr APIでは位置情報が出力されるので，マッシュアップがとても便利です。そこで，Flickr APIとGoogle Maps APIをマッシュアップしてみました。

具体的には，各自のサイトにGoogle Mapsの地図をおき，サイドバーで位置情報が付いた写真のリストが表示されます。リストをクリックすると，地図上のアイコンから吹き出しが出て，写真が表示されます。また，地図上のアイコンをクリックしても，吹き出しが表示されます。

Flickrに位置情報（ジオタグ）をつける方法

以前のブログエントリを参照してください。

写真に位置情報を付ける方法のまとめ（携帯電話を除く）
http://www.tagchan.net/blog/2008/03/photo_plus_location.html

iPhoneからFlickrへ位置情報付き写真をアップロードする方法のまとめ
http://www.tagchan.net/blog/2008/12/iphone_photo2flickr.html

使用例

以下のページに，設置した例を示します。

Flickr Photo Map (id:tagchan) with Google Maps API
http://www.tagchan.net/sample/flickr_gmap.html

Flickr Photo Maps (id:tagchan_stream) with Google Maps API
http://www.tagchan.net/sample/flickr_gmap_lifelog.html

設置方法

まずFlickr APIのKeyを取得し，ユーザIDを確認しておく必要があります。 FlickrのサイトにてAPI Keyを取得しましょう。ユーザIDはたとえば「7593934@N02」のような感じです。また，Google Maps API Keyも当然取得しておきましょう。

以下に示すコードを，「</body>」タグの直前に埋め込みます。

<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible()) {

  var map;
  var markerContents = new Array();
  var markers = new Array();
  var markerPoints = new Array();

  map = new GMap2(document.getElementById("map"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(35.4248, 139.213),8);
  map.setMapType(G_SATELLITE_MAP);
  map.enableContinuousZoom();
  map.enableDoubleClickZoom();
  map.addControl(new GScaleControl());
  map.addControl(new GOverviewMapControl(new GSize(120,120)));

  var baseIcon = new GIcon();
  var camera = new GIcon();

  baseIcon.iconSize = new GSize(40, 40);
  baseIcon.iconAnchor = new GLatLng(20, 20);
  baseIcon.infoWindowAnchor = new GLatLng(20, 20);
  baseIcon.infoShadowAnchor = new GLatLng(20, 20);

  camera.iconSize = new GSize(15, 15);
  camera.iconAnchor = new GLatLng(8, 8);
  camera.infoWindowAnchor = new GLatLng(8, 8);
  camera.infoShadowAnchor = new GLatLng(8, 8);
  var photoIcon = new GIcon(camera);
  photoIcon.image = "http://www.tagchan.net/icon_image/camera.png";

  var center = map.getCenter();

  GEvent.addListener(map, "moveend", function() {
    updateStatus();
  });

}else {alert("Sorry, the Google Maps API is not compatible with your browser");}

//]]>
</script>

下から12行目のcamera.pngについては，各自で好みのアイコンに変更すると良いでしょう。

「<body>」タグには，「onload="load()" onunload="GUnload()"」を含める必要があります。そして，地図を表示したい部分に以下のHTMLを貼り付けます。

<table><tr><td>
<script type="text/javascript" src="flickr_gmap.js"></script>
<div id="map" style="width: 600px; height: 500px"></div>
</td>
<td width="250px" valign="top" style="font-size:12px;">
<div id="sidebar" style="margin:10px;overflow:auto;height:500px;">Loading...</div>
</td></tr>
<tr><td colspan="2">
<div style="font-size: 12px;text-align:left;" id="status"><b>Current zoom level:</b>8 | <b>Map center location:</b> Lon:34.991191 &deg, Lon: 139.008739 &deg</div>
</td></tr><table>

次に，以下のコードをコピー／ペーストして，flickr_gmap.js としてダウンロード&保存しましょう。なお，apikeyはFlickr APIのキー， useridはFlickrのユーザID，maps_keyはGoogle Maps APIのキーです。

// ============================================================================
//  flickr_gmap.js
//
//  Geotagged photos, which were uploaded at flickr, can be plotted on 
//  Google Maps in your website. Firstly, you should geotag your photos.
//  Secondly, you should get flickr and Google Maps API key.
//  Visit and get api-key in http://www.flickr.com/services/api/keys/apply/
//  and http://code.google.com/apis/maps/signup.html
//
//  Copyright 2009 Hitoshi Taguchi <tagchan@gmail.com>
//  http://www.tagchan.net/
//
// ============================================================================

// Input your flickr api-key and user-id
var apikey = "----Your Flickr API Key----";
var userid = "----Your Flickr USER ID----";

// Input your Google Maps API Key
var maps_key = "----Your Google Maps API Key----";

var ini_pages = 1;
var max_pages;
var page = 1;

function load(){
  getjsonSearch(apikey, userid, ini_pages);
}

function getjsonSearch(key, id, p){
  var req_url = "http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + key + "&user_id=" + id + "&sort=date-taken-desc&extras=geo,date_taken,owner_name&per_page=50&page="+ p +"&format=json&jsoncallback=jsonPhoto";
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = req_url;
  document.getElementsByTagName("head")[0].appendChild(script);
  return;
}

// Parse JSON file and create marker for Google Maps
function jsonPhoto( obj ){
  max_pages = obj.photos.pages;
  sidebar_html = "<ul style='margin:1px;'>";
  for(var i=1; i<= max_pages; i++){
    if(i==page){
      sidebar_html += "-"+ i +"";
    } else {
      sidebar_html += "-<a href='javascript:change_page("+ i +")'>"+ i +"</a>";
    }
  }
  // Each picture which is geotagged
  for(var i=0; i<obj.photos.photo.length; i++){
    var photo = obj.photos.photo[i];
    // URL of photos. The format of URL is witten in http://www.flickr.com/services/api/misc.urls.html
    var str = "http://static.flickr.com/" + photo.server +"/"+ photo.id +"_"+ photo.secret + "_t.jpg";

    // Get parameters from JSON file and make points
    var point = new GLatLng(photo.latitude, photo.longitude);
    var title = photo.title;
    var owner = photo.ownername;
    var lng = photo.longitude;
    var lat = photo.latitude;
    var location_accuracy = photo.accuracy;
    var date = photo.datetaken;

    var id_url = "http://www.flickr.com/photos/" + userid + "/"+ photo.id +"/";
    var div = document.createElement("img");
    div.src = str;

    // create markers points
    var marker = createMarker(point, i, title, date, str, lat, lng, id_url, location_accuracy, owner);
    // create sidebar contents
    sidebar_html += "<li> <a href='javascript:spotZoom("+ i +")'><b>" + title + "</b></a> " + date + " [<a href='" + id_url + "'><span style='color: rgb(0, 99, 220);'>flick</span><span style='color: rgb(255, 0, 132);'>r</span></a>]</li>";
    map.addOverlay(marker);
  }

  for(var i=1; i<= max_pages; i++){
    if(i==page){
      sidebar_html += "-"+ i +"";
    } else {
      sidebar_html += "-<a href='javascript:change_page("+ i +")'>"+ i +"</a>";
    }
  }
  sidebar_html += "</ul>";
  document.getElementById("sidebar").innerHTML = sidebar_html;
  return;
}


function change_page(p){
  page = p;
  map.clearOverlays();
  getjsonSearch(apikey, userid, p);
}

// Create markers
function createMarker(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner) {
  markerPoints[index] = point;
  var marker = new GMarker(point, photoIcon);
  markers[index] = marker;
  var html = createMarkerContent(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner);
  GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml(html);
  });
  return marker;
}

// Create markers content "fukidashi"
function createMarkerContent(point, index, title, date, str, lat, lng, id_url, location_accuracy, owner) {
  var html = "<div style='width:250px;height:170px;font-size:11px;'><div style='font-size:14px;color:#ffffff;background:#8fabbe;'>" + title + "</b></div> <b>" + date + " [<a href='" + id_url + "'><span style='color: rgb(0, 99, 220);'>flick</span><span style='color: rgb(255, 0, 132);'>r</span></a>] by "+ owner +"</b><br><a href='" + id_url + "'><img src= '" + str + "'></a><br>Lat: " + lat + ", Lon:" + lng + "<br>Location accuracy: " + location_accuracy + "<br>[<a href='javascript:zoomin(" + lat + "," + lng + ");'>zoom in<\/a>]</div>";
  markerContents[index] = html;
  return html;
}

// Zoom-in
function zoomin(latn, lonn) { 
  map.setCenter(new GLatLng(latn,lonn), 15);
}

// Zoom a marker, when a sidebar list is clicked.
function spotZoom(index) {
  map.panTo(markerPoints[index]);
  markers[index].openInfoWindowHtml(markerContents[index]);
}

// show coordinates and zoom number
function updateStatus(){
  var point = map.getCenter();
  var status = "<b>Current zoom level:</b>  "+map.getZoom()+" <b>Map center location:</b> Lon "+ Math.round(point.x*100000)/100000 + "&deg;, Lat " + Math.round(point.y*100000)/100000+ "&deg;";
  document.getElementById("status").innerHTML = status;
}

おわりに

今後，いろいろと改変してみてください。基本的にどんどん良くしていきたいと考えています。もし，改変してBlog等で紹介していただける場合は，ご一報をいただけると幸いです。また，改変してコードを公開する場合も，ご一報をいただけると幸いです。

注意：本スクリプトを利用したことによるいかなる不利益が生じましても一切責任は負いかねます。

Return to page top