Flickr写真のGoogle Mapsへのマッピング

2008/01/25 田口仁

はじめに

Flickrにアップロードされた写真で，GeoTagが付けられた写真を自分のサイトのGoogle Mapsにマッピングします。また，リスト表示にも対応しています。

GeoTagを付ける方法

まず，こちらのサイトにある，ブックマークレット「Don't waste your time: Grab it here!」をお気に入りに登録します。そして，自分の写真をFlickrで見ている状態で，そのBookmarkletをクリックします。すると，Google Mapsの地図が今までの写真の場所に表示されます。そこで撮影した場所をクリックして登録すると，GeoTagを付けることができます。

設置方法

自サイトにGoogle Mapsを表示させるためには，Google Maps API Keyを取得する必要があります。また，FlickrのAPI keyも取得してください。

JSファイルはこちらです。JSONPを使って写真のフィードを取得しています。HTMLファイル内のbodyタグは，

設置例

Current zoom level:15 | Map center location: Lon:34.991191 °, Lon: 139.008739 °

htmlに貼り付けるコード

//<![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");}

//]]>