Flickrジオタグ付き写真活用
今回は、Flickrに置かれているジオタグ(位置情報)付き写真を
JavaScript等の手間をかけることなく、ブログやWEBページ、Google Sitesに貼り付ける方法を紹介します。
むかし昔
2年ほど前に「kml だけでgooglemaps を表示する方法」でKMLをスクリプトレスで表示する方法を書きました。
今回は、Flickr上にあるジオタグの付いた写真をノンスクリプトで表示する方法を紹介します。
題名の通りJavaScriptやFlashは使いません、以前と同じくURLにつなげるだけ
ちょっと応用すると、このところ連続で書いているGoogle Sitesにおいても利用することができます。
サンプルはGoogle Sitesのコレ
なにをどおするのか?
Flickが元々提供しているジオタグ付き写真の情報をKMLで配信する機能をつかいます。
このKMLを配信するnetwork linkを利用してスクリプト無しでGoogle Mapsを貼り付ける方法を簡単に紹介
対象:
Flickrに置いてあるジオタグ付き(geotagged)写真をGoogle マップに貼り付けたいと思っている方
----------------------------------------------------------
ジオタグ(位置情報)付き写真をGoogle Mapsに貼り付ける
[1.KMLネットワークリンクの取得]
最初にFlickrが提供しているKMLのリンクを取得します。
1.対象のFlickrページホームへ移動します。
calculのページはココ
2.KMLネットワークリンクの取得
ページ下部にあるKMLのURLリンクをコピーします。
[2.GoogleマップのURL取得]
1.Googleマップを開きます。
2.検索BOXにFlickrから取得したKMLのリンクをペーストします。
3.「地図を検索」ボタンを押します。
4.地図と写真の確認
世界地図の中に写真が表示されている事を確認します。
5.表示したい中心点に移動する
ダブルクリックとマウス操作で、地図縮尺と表示したい位置に移動します。
この作業を行うことで、初期設定の緯度経度0,0の海面からマウスで選択した中心位置の情報がURLに追加されます。
6.中心点のURLを取得する
Googleマップ右上の「リンク」をコピーします。
[3.Googleマップの表示]
3つのタイプに分けて方法を解説します。
3-1.リンクで表現
先ほどの2.6で取得したURLそのままでGoogleマップを表示する事ができます。
Googleマップ表示サンプル:http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=http:%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fgeo%2F%3Fid%3D79814082%40N00%26lang%3Den-us%26format%3Dkml_nl&ie=UTF8&ll=34.918593,137.249451&spn=0.489829,0.884399&z=10
3-2.ブログ等に貼り付け
ブログのページ上でグリグリ動かしたければ、もうちょっと加工します。
たとえば、「第５回岡崎市民サイクリング ツールド三河湖要綱」にあるようにするのでしたら
グーグルマップの「リンク」ボタンを押したときに出てくる「カスタマイズ」を利用することで任意の地図サイズの設定と貼り付け用のHTMLが取得出来ます。
マイマップと同じね。
ツールド三河湖
3-3.Google Sitesに貼り付け
Google Sitesには直接HTMLを貼り付けても表示されないため、iframeガジェットを使って貼り付けます。
iframeを使ってGoogleMapsを貼り付ける方法は「ガジェットを使って Google siteにGoogleマップを貼り付ける」にあります。2.6で取得したURLを使います。
3-4.おまけ:プレイスマーク付きGoogleマップ
ここでもう１つのプレイスマークリンクを含めたGoogle Mapsの表示方法を紹介します。
今までの方法では地図が表示されるだけでしたが、これから解説する方法を利用すると下記のように、左側にプレスマーク付きページが表示されるようになります。サンプルページ
「プレイスマーク付き」Googleマップ
使用するiframeガジェットも今まで使ってきた3番目の「iframe」を使い
srcに2.6で取得したURLを貼り付けます。
※リンク分だけ幅(width)を大きめに設定する必要アリ。
補足:Flickrのジオタグに付いて
ここで言うジオタグ付き写真とは、JPG画像のExif部に位置情報が書き込まれた画像の事を指します。
Flickrの画面で見るとMAPの文字の付いたそれね。
----------------
参考:
・デジカメ写真に位置情報・ジオタグを付ける:GPS不要(地図を見ながらジオタグ追加)
・デジカメ画像にジオタグをつける方法２ GPSデータがある場合
・ω_(゜∀゜ )Flickr画像をGoogleEarthやGoogleマップで使いまわす
・kml だけでgooglemaps を表示する方法
・祝Google マイマップ アップデート ローカルKMLファイルがインポート可能に!!
今回は、Flickrに置かれているジオタグ(位置情報)付き写真を
JavaScript等の手間をかけることなく、ブログやWEBページ、Google Sitesに貼り付ける方法を紹介します。
むかし昔
2年ほど前に「kml だけでgooglemaps を表示する方法」でKMLをスクリプトレスで表示する方法を書きました。
今回は、Flickr上にあるジオタグの付いた写真をノンスクリプトで表示する方法を紹介します。
題名の通りJavaScriptやFlashは使いません、以前と同じくURLにつなげるだけ
ちょっと応用すると、このところ連続で書いているGoogle Sitesにおいても利用することができます。
サンプルはGoogle Sitesのコレ
なにをどおするのか?
Flickが元々提供しているジオタグ付き写真の情報をKMLで配信する機能をつかいます。
このKMLを配信するnetwork linkを利用してスクリプト無しでGoogle Mapsを貼り付ける方法を簡単に紹介
対象:
Flickrに置いてあるジオタグ付き(geotagged)写真をGoogle マップに貼り付けたいと思っている方
----------------------------------------------------------
ジオタグ(位置情報)付き写真をGoogle Mapsに貼り付ける
[1.KMLネットワークリンクの取得]
最初にFlickrが提供しているKMLのリンクを取得します。
1.対象のFlickrページホームへ移動します。
calculのページはココ
2.KMLネットワークリンクの取得
ページ下部にあるKMLのURLリンクをコピーします。
[2.GoogleマップのURL取得]
1.Googleマップを開きます。
2.検索BOXにFlickrから取得したKMLのリンクをペーストします。
3.「地図を検索」ボタンを押します。
4.地図と写真の確認
世界地図の中に写真が表示されている事を確認します。
5.表示したい中心点に移動する
ダブルクリックとマウス操作で、地図縮尺と表示したい位置に移動します。
この作業を行うことで、初期設定の緯度経度0,0の海面からマウスで選択した中心位置の情報がURLに追加されます。
6.中心点のURLを取得する
Googleマップ右上の「リンク」をコピーします。
[3.Googleマップの表示]
3つのタイプに分けて方法を解説します。
3-1.リンクで表現
先ほどの2.6で取得したURLそのままでGoogleマップを表示する事ができます。
Googleマップ表示サンプル:http://maps.google.co.jp/maps?f=q&hl=ja&geocode=&q=http:%2F%2Fapi.flickr.com%2Fservices%2Ffeeds%2Fgeo%2F%3Fid%3D79814082%40N00%26lang%3Den-us%26format%3Dkml_nl&ie=UTF8&ll=34.918593,137.249451&spn=0.489829,0.884399&z=10
3-2.ブログ等に貼り付け
ブログのページ上でグリグリ動かしたければ、もうちょっと加工します。
たとえば、「第５回岡崎市民サイクリング ツールド三河湖要綱」にあるようにするのでしたら
グーグルマップの「リンク」ボタンを押したときに出てくる「カスタマイズ」を利用することで任意の地図サイズの設定と貼り付け用のHTMLが取得出来ます。
マイマップと同じね。
ツールド三河湖
3-3.Google Sitesに貼り付け
Google Sitesには直接HTMLを貼り付けても表示されないため、iframeガジェットを使って貼り付けます。
iframeを使ってGoogleMapsを貼り付ける方法は「ガジェットを使って Google siteにGoogleマップを貼り付ける」にあります。2.6で取得したURLを使います。
3-4.おまけ:プレイスマーク付きGoogleマップ
ここでもう１つのプレイスマークリンクを含めたGoogle Mapsの表示方法を紹介します。
今までの方法では地図が表示されるだけでしたが、これから解説する方法を利用すると下記のように、左側にプレスマーク付きページが表示されるようになります。サンプルページ
「プレイスマーク付き」Googleマップ
使用するiframeガジェットも今まで使ってきた3番目の「iframe」を使い
srcに2.6で取得したURLを貼り付けます。
※リンク分だけ幅(width)を大きめに設定する必要アリ。
補足:Flickrのジオタグに付いて
ここで言うジオタグ付き写真とは、JPG画像のExif部に位置情報が書き込まれた画像の事を指します。
Flickrの画面で見るとMAPの文字の付いたそれね。
----------------
参考:
・デジカメ写真に位置情報・ジオタグを付ける:GPS不要(地図を見ながらジオタグ追加)
・デジカメ画像にジオタグをつける方法２ GPSデータがある場合
・ω_(゜∀゜ )Flickr画像をGoogleEarthやGoogleマップで使いまわす
・kml だけでgooglemaps を表示する方法
・祝Google マイマップ アップデート ローカルKMLファイルがインポート可能に!!