Panoramio API｜Panoramio｜Web関連特集

Panoramioについて
Panoramio APIの使い方〔パラメータ〕
Panoramio写真をサイトに表示する際の注意点
API制限
指定した場所周辺のPanoramio写真を1枚だけ表示〔中サイズ〕
指定した場所周辺のPanoramio写真をギャラリー表示〔正方形サイズ〕
マーカークリックでその場所のPanoramio写真を情報ウィンドウで表示〔Googleマップ使用〕
現在位置周辺のPanoramio写真をGoogleマップ上に表示〔HTML5 Geolocation API使用〕

Panoramioについて

2012/5/17

Panoramio（パノラミオ）は、場所の写真を共有する写真投稿SNS。 GoogleマップやGoogle Earth上で、その場所で撮影された写真を見ながら世界中を探索できます。

このサービスにおいて、写真は「その場所を説明するもの」という位置付けになっています。なので、被写体となるのは人物やペットとかではなく、自然や町並みなど、その場所で撮影した本物の風景の写真がメインとなります。

Panoramioに写真を投稿するには、PanoramioサイトにGoogleアカウントでログインし、ユーザー名を登録すればOK。ユーザーページより写真をアップロードできます。投稿した写真は、特に問題なければ1日か2日ほどでGoogle Earthに掲載されます。

Panoramioの写真をWebサイトに表示するには、Panoramio APIを使用します。 APIを簡単に扱える、Panoramio Widget APIが用意されています。 iframe版なら、プログラミングの知識があまりなくても簡単にサイトに埋め込めます。

Panoramio APIの使い方
パラメータ

2012/5/17

Panoramio APIを使用すると、指定した時範囲のPanoramioの写真を取得して、サイト上に表示することができます。

構文

APIをたたくURLの構文は以下のようにパラメータで写真の抽出条件を指定します。

http://www.panoramio.com/map/get_panoramas.php?{パラメータ}

http://www.panoramio.com/map/get_panoramas.php?set=public&from=0&to=22&minx=139.70300099999997&miny=35.657386&maxx=139.72109899999998&maxy=35.67244&size=small&mapfilter=true

パラメータ

説明

set

写真セットの抽出対象。下記のいずれかの値を指定可。
public（人気の写真から抽出） full（全写真から抽出）ユーザーID（指定したユーザーIDの人が投稿した写真から抽出。ユーザーIDは数値指定。）

size

写真サイズを指定。下記のいずれかの値を指定可。

値	説明
original	元サイズ
medium	中サイズ（最大500x500以内）※デフォルト
small	小サイズ（最大240x240以内）
thumbnail	サムネイル（最大100x100以内）
square	正方形（60x60固定）
mini_square	ミニ正方形（32x32）

minx

写真表示領域の最小経度

miny

写真表示領域の最小緯度

maxx

写真表示領域の最大経度

maxy

写真表示領域の最大緯度

from
to

表示する写真の範囲指定。
'from=X&&to=Y'とすると、YからXにある写真を取得できます。値0は、Panoramioに投稿された最新の写真。例えば'from=0&&to=20'は、Panoramioに投稿された最新の20枚の写真セットを取得。それより過去に投稿された写真を取得するには'from=20&&to40'といった具合に。 1回のリクエストで取得可能な写真は、最大100枚まで。

mapfilter

地図フィルターの有無。「true｣を指定すると、写真にそれらが地図上に配置される際に、よりよく見えるようにフィルタリングされます。位置への配慮がなされ、同じ場所の写真が返されなくなります。

戻り値

結果はJSONデータで返ります。

json

{"count":652,"photos":[{"upload_date":"19 August 2010","owner_name":"iso529","photo_id":39504505,"longitude":139.879797,"height":166,"width":240,"photo_title":"Silhouette of Cinderella Castle  (Tokyo Disneyland )","latitude":35.633938999999998,"owner_url":"http://www.panoramio.com/user/2168951","photo_url":"http://www.panoramio.com/photo/39504505","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/39504505.jpg","owner_id":2168951},{"upload_date":"20 September 2010","owner_name":"atom70","photo_id":41024971,"longitude":139.881591796875,"height":160,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.626640319824219,"owner_url":"http://www.panoramio.com/user/1717224","photo_url":"http://www.panoramio.com/photo/41024971","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/41024971.jpg","owner_id":1717224},{"upload_date":"19 September 2010","owner_name":"atom70","photo_id":41011635,"longitude":139.885696411,"height":160,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.6250953674,"owner_url":"http://www.panoramio.com/user/1717224","photo_url":"http://www.panoramio.com/photo/41011635","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/41011635.jpg","owner_id":1717224},{"upload_date":"18 August 2010","owner_name":"iso529","photo_id":39450402,"longitude":139.880279,"height":240,"width":160,"photo_title":"\u30b7\u30f3\u30c7\u30ec\u30e9\u57ce\u3000\u591c","latitude":35.632778999999999,"owner_url":"http://www.panoramio.com/user/2168951","photo_url":"http://www.panoramio.com/photo/39450402","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/39450402.jpg","owner_id":2168951},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337240,"longitude":139.878793,"height":180,"width":240,"photo_title":"Tokyo Disneyland","latitude":35.631278999999999,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337240","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337240.jpg","owner_id":267274},{"upload_date":"17 March 2007","owner_name":"josleeser","photo_id":1359567,"longitude":139.88521499999999,"height":160,"width":240,"photo_title":"Disneyland Tokyo","latitude":35.631557999999998,"owner_url":"http://www.panoramio.com/user/266089","photo_url":"http://www.panoramio.com/photo/1359567","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1359567.jpg","owner_id":266089},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337414,"longitude":139.888272,"height":240,"width":180,"photo_title":"Tokyo DisneySea","latitude":35.624046,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337414","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337414.jpg","owner_id":267274},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337298,"longitude":139.88426799999999,"height":180,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.626285000000003,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337298","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337298.jpg","owner_id":267274},{"upload_date":"17 October 2007","owner_name":"kokupsy_un","photo_id":5360576,"longitude":139.88565399999999,"height":240,"width":161,"photo_title":"IKSPIARI 20061217-172013","latitude":35.634448999999996,"owner_url":"http://www.panoramio.com/user/426762","photo_url":"http://www.panoramio.com/photo/5360576","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/5360576.jpg","owner_id":426762},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337468,"longitude":139.88898,"height":180,"width":240,"photo_title":"Japan, Tokyo DisneySea","latitude":35.627066999999997,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337468","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337468.jpg","owner_id":267274},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337465,"longitude":139.88674900000001,"height":162,"width":240,"photo_title":"Japan, Tokyo DisneySea","latitude":35.623534999999997,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337465","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337465.jpg","owner_id":267274},{"upload_date":"19 September 2010","owner_name":"atom70","photo_id":41012257,"longitude":139.88491821289062,"height":160,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.624523162841797,"owner_url":"http://www.panoramio.com/user/1717224","photo_url":"http://www.panoramio.com/photo/41012257","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/41012257.jpg","owner_id":1717224},{"upload_date":"19 December 2010","owner_name":"\ud83c\udf1fAXL\u2648CowBoy\ud83c\udf1f","photo_id":45264611,"longitude":139.88180800000001,"height":240,"width":178,"photo_title":"\u26061984 Tokyo Disneyland~Cinderella Castle~\u2606","latitude":35.632561000000003,"owner_url":"http://www.panoramio.com/user/1373686","photo_url":"http://www.panoramio.com/photo/45264611","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/45264611.jpg","owner_id":1373686},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337211,"longitude":139.88008099999999,"height":240,"width":180,"photo_title":"Tokyo Disneyland","latitude":35.632195000000003,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337211","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337211.jpg","owner_id":267274},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337216,"longitude":139.88076699999999,"height":240,"width":180,"photo_title":"Tokyo Disneyland","latitude":35.634492999999999,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337216","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337216.jpg","owner_id":267274},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337277,"longitude":139.88091,"height":240,"width":209,"photo_title":"Tokyo Disneyland","latitude":35.632069000000001,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337277","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337277.jpg","owner_id":267274},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337351,"longitude":139.882071,"height":180,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.628104999999998,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337351","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337351.jpg","owner_id":267274},{"upload_date":"12 May 2007","owner_name":"yohidore","photo_id":2180619,"longitude":139.88647,"height":26,"width":240,"photo_title":"DisneySEA  Panorama \u30d1\u30ce\u30e9\u30de\u7684\u773a\u3081","latitude":35.625528000000003,"owner_url":"http://www.panoramio.com/user/346277","photo_url":"http://www.panoramio.com/photo/2180619","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/2180619.jpg","owner_id":346277},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337345,"longitude":139.881089,"height":240,"width":180,"photo_title":"Tokyo DisneySea","latitude":35.626313000000003,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337345","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337345.jpg","owner_id":267274},{"upload_date":"17 March 2007","owner_name":"josleeser","photo_id":1359615,"longitude":139.884109,"height":240,"width":160,"photo_title":"Disney tokyo","latitude":35.625768000000001,"owner_url":"http://www.panoramio.com/user/266089","photo_url":"http://www.panoramio.com/photo/1359615","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1359615.jpg","owner_id":266089},{"upload_date":"28 June 2007","owner_name":"yohidore","photo_id":2994297,"longitude":139.879335,"height":160,"width":240,"photo_title":"Disneyland","latitude":35.633659999999999,"owner_url":"http://www.panoramio.com/user/346277","photo_url":"http://www.panoramio.com/photo/2994297","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/2994297.jpg","owner_id":346277},{"upload_date":"17 March 2007","owner_name":"josleeser","photo_id":1359514,"longitude":139.88102000000003,"height":160,"width":240,"photo_title":"Disneyland Tokyo","latitude":35.632465000000003,"owner_url":"http://www.panoramio.com/user/266089","photo_url":"http://www.panoramio.com/photo/1359514","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1359514.jpg","owner_id":266089},{"upload_date":"19 October 2007","owner_name":"kokupsy_un","photo_id":5401381,"longitude":139.88821300000001,"height":240,"width":161,"photo_title":"\"DisneySea\" 20060424-145213","latitude":35.627518999999999,"owner_url":"http://www.panoramio.com/user/426762","photo_url":"http://www.panoramio.com/photo/5401381","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/5401381.jpg","owner_id":426762},{"upload_date":"15 March 2007","owner_name":"Igor_99","photo_id":1337442,"longitude":139.88722100000001,"height":180,"width":240,"photo_title":"Tokyo DisneySea","latitude":35.627006000000002,"owner_url":"http://www.panoramio.com/user/267274","photo_url":"http://www.panoramio.com/photo/1337442","photo_file_url":"http://mw2.google.com/mw-panoramio/photos/small/1337442.jpg","owner_id":267274}],"has_more":true,"map_location":{"lat":35.629013999999998,"lon":139.88340397683021,"panoramio_zoom":3}}

jQueryのgetJSON()を使用すれば、JSONデータで取得した写真情報を簡単に扱えます。

設置サンプルサンプルを見る

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function(){
        /* http://www.panoramio.com/map/get_panoramas.php?order=popularity&amp;set=public&amp;from=0&amp;to=24&amp;minx=139.86816520000002&amp;miny=35.6166016&amp;maxx=139.90017999999998&amp;maxy=35.6347409&amp;size=small&amp;mapfilter=true */
        var s="";
        var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
        var data={
            order:"popularity",
            set:"public",
            from:0,
            to:24,
            minx:139.86816520000002,
            miny:35.6166016,
            maxx:139.90017999999998,
            maxy:35.6347409,
            size:"small",
            mapfilter:true
        }
        $.getJSON(url,data,function(json){
            /* console.log(json); */
            s+="json.count="+json.count+"<br>";
            s+="has_more="+json.has_more+"<br>";
            s+="map_location.lat="+json.map_location.lat+"<br>";
            s+="map_location.lon="+json.map_location.lon+"<br>";
            s+="map_location.panoramio_zoom="+json.map_location.panoramio_zoom+"<br>";
            for(var i in json.photos){
                s+="photos["+i+"].height="+json.photos[i].height+"<br>";
                s+="photos["+i+"].latitude="+json.photos[i].latitude+"<br>";
                s+="photos["+i+"].longitude="+json.photos[i].longitude+"<br>";
                s+="photos["+i+"].owner_id="+json.photos[i].owner_id+"<br>";
                s+="photos["+i+"].owner_name="+json.photos[i].owner_name+"<br>";
                s+="photos["+i+"].owner_url="+json.photos[i].owner_url+"<br>";
                s+="photos["+i+"].photo_file_url="+json.photos[i].photo_file_url+"<br>";
                s+="photos["+i+"].photo_id="+json.photos[i].photo_id+"<br>";
                s+="photos["+i+"].photo_title="+json.photos[i].photo_title+"<br>";
                s+="photos["+i+"].photo_url="+json.photos[i].photo_url+"<br>";
                s+="photos["+i+"].upload_date="+json.photos[i].upload_date+"<br>";
                s+="photos["+i+"].width="+json.photos[i].width+"<br>";
            }
            s+="photos.length="+json.photos.length+"<br>";
            $("#res").html(s);
        });
    });
</script>
<div id="res"></div>

JSONデータの中身を展開すると、以下のようになります。

/* "count"　その領域内にある写真セットにおいて、利用可能な写真の合計数 */
json.count=652 
has_more=true
/* "map_location"　地図の場所の緯度・経度・ズームレベル */
map_location.lat=35.629014
map_location.lon=139.8834039768302
map_location.panoramio_zoom=3
/* "photo"　パラメータで指定した条件で抽出した写真セット */
photos[0].height=166
photos[0].latitude=35.633939
photos[0].longitude=139.879797
photos[0].owner_id=2168951
photos[0].owner_name=iso529
photos[0].owner_url=http://www.panoramio.com/user/2168951
photos[0].photo_file_url=http://mw2.google.com/mw-panoramio/photos/small/39504505.jpg
photos[0].photo_id=39504505
photos[0].photo_title=Silhouette of Cinderella Castle (Tokyo Disneyland )
photos[0].photo_url=http://www.panoramio.com/photo/39504505
photos[0].upload_date=19 August 2010
photos[0].width=240
photos[1].height=160
photos[1].latitude=35.62664031982422
photos[1].longitude=139.881591796875
photos[1].owner_id=1717224
photos[1].owner_name=atom70
photos[1].owner_url=http://www.panoramio.com/user/1717224
photos[1].photo_file_url=http://mw2.google.com/mw-panoramio/photos/small/41024971.jpg
photos[1].photo_id=41024971
photos[1].photo_title=Tokyo DisneySea
photos[1].photo_url=http://www.panoramio.com/photo/41024971
photos[1].upload_date=20 September 2010
photos[1].width=240
…（略）…
/* "length"　写真セットに含まれる写真数 */
photos.length=24

Panoramio写真をサイトに表示する際の注意点

2012/5/17

Panoramioの写真をWebサイトに表示する際には、リンク方法や表記など、いくつかルールがあります。詳細は、Panoramio APIの要件に記載されています。

Panoramioの名前とロゴを表示する。
1ページ内に表示可能な写真は最大50画像まで。
サイトに表示したPanoramio写真自体に、その写真の写真ページのリンクを設置。
http://www.panoramio.com/photo/写真ID
写真の下に「Panoramio 写真は所有者の著作権により保護されています」と表示する。
中サイズ、元サイズの写真を使用した場合は、写真の真下か横にPanoramiaロゴと撮影者名を表示する。
撮影者名には、撮影者のユーザーページへのリンクを設置。
http://www.panoramio.com/user/オーナーID
写真タイトルには、写真ページへのリンクを設置。
http://www.panoramio.com/photo/写真ID

表示例

中サイズ画像をサイトに表示する場合

複数の正方形写真をサイトに表示する場合

API制限

2012/5/17

Panoramio APIは、制限を超えない限り商用・非商用利用ともに無料で使えます。ただし、特定の種類の宣伝目的での利用、一定の低域幅制限を超えるAPI利用については有料となります。

詳細は、Panoramio APIの利用規約に記載されています。

指定した場所周辺のPanoramio写真を1枚だけ表示
中サイズ

2012/5/17

表参道周辺のPanoramio写真を1枚だけ表示するサンプルです。
「from=50&&to=51」として、最近投稿された写真(0番目)から51番目の写真を1枚取得して表示します。サムネイルをクリックすると、該当する写真ページを別窓で開きます。

設置サンプルサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio API | 設置サンプル</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /* 
                場所の境界は以下のページで住所空検索できます。
                http://phpjavascriptroom.com/example7.php?f=include/ajax/gmapv3/geocoding/geocoding.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#
            */
            var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
            var data={
                set:"public",
                from:50,
                to:51,
                minx:139.70300099999997,
                miny:35.657386,
                maxx:139.72109899999998,
                maxy:35.67244,
                size:"medium",
                mapfilter:true,
                ts:new Date().getTime()
            }
            var s="";
            $.getJSON(url,data,function(json){
                console.log(json);
                var pdata=json.photos[0];
                s+='<div class="inner">'+
                    '<a href="http://www.panoramio.com/" target="_blank"><img src="/content/demo/geolocation/logo-small.gif" width="119" height="25" alt="Panoramio logo" /><\/a><br \/>'+
                    '<a href="'+pdata.photo_url+'" target="_blank"><img width="'+pdata.width+'" height="'+pdata.height+'" src="'+pdata.photo_file_url+'"/><\/a>'+
                    '<p><a target="_blank" class="photo_title" href="'+pdata.photo_url+'"><strong>'+pdata.photo_title+'<\/strong><\/a>　'+
                    'by <a target="_blank" href="'+pdata.owner_url+'">'+pdata.owner_name+'<\/a><\/p><\/div>';
                $("#pano").html(s);
            });
        });
    </script>
    <style type="text/css">
        * {
            margin:0; padding:0;
            font-size:12px;
        }
        body {
            line-height:1.2;
            margin:20px;
        }
        #box {
            margin:20px 0;
            width:520px;
            text-align:center;
        }
        #box div.inner {
            border:1px solid #ccc;
            margin:0 0 5px 0; padding:10px;
        }
        #box div.inner p {
            margin-top:5px;
        }
        #license {
            font-size:11px;
            text-align:center;
            color:#666;
        }
    </style>
</head>
<body>
    <h1>設置サンプル</h1>
    <div id="box">
        <div id="pano"></div>
        <div id="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</div>
    </div>
</body>
</html>

指定した場所周辺のPanoramio写真をギャラリー表示
正方形サイズ

2012/5/17

表参道周辺のPanoramio写真を複数枚ギャラリー風に表示するサンプルです。
サムネイルをクリックすると、該当する写真ページを別窓で開きます。

設置サンプルサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio API | 設置サンプル</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){
            /* 
                場所の境界は以下のページで住所空検索できます。
                http://phpjavascriptroom.com/example7.php?f=include/ajax/gmapv3/geocoding/geocoding.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#
            */
            var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
            var data={
                set:"public",
                from:0,
                to:28,
                minx:139.70300099999997,
                miny:35.657386,
                maxx:139.72109899999998,
                maxy:35.67244,
                size:"square",
                mapfilter:true,
                ts:new Date().getTime()
            }
            var s="";
            $.getJSON(url,data,function(json){
                for(var i in json.photos){
                    s+="<a href='http://www.panoramio.com/photo/"+json.photos[i].photo_id+"' target='_blank'><img src='"+json.photos[i].photo_file_url+"' /></a>";
                }
                $("#pano").html(s);
            });
        });
    </script>
    <style type="text/css">
        * {
            margin:0; padding:0;
            font-size:12px;
        }
        body {
            line-height:1.2;
            margin:20px;
        }
        #box {
            width:498px;
            background:#333;
            margin:20px;
            color:#fff;
        }
        #box h2 {
            margin:0; padding:5px 10px;
            font-size:13px;
        }
        #box p.license {
            margin:0; padding:5px 10px;
            font-size:11px;
            text-align:right;
        }
        #pano {
            margin:0; padding:0 0 0 4px;
            overflow:hidden;
            clear:both;
            float:none;
        }
        #pano a {
            border:1px solid #fff;
            margin:0 4px 4px 4px; padding:0;
            display:block;
            width:60px; height:60px;
            float:left;
        }
    </style>
</head>
<body>
    <h1>設置サンプル</h1>
    <div id="box">
        <h2>表参道周辺の写真</h2>
        <div id="pano"></div>
        <p class="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</p>
    </div>
</body>
</html>

マーカークリックでその場所のPanoramio写真を情報ウィンドウで表示
Googleマップ使用

2012/5/17

最近投稿された表参道周辺のPanoramio写真をGoogleマップ上に表示するサンプルです。
Panoramio写真がある位置にマーカーを立てます。
マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。

設置サンプルサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio API | 設置サンプル</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
        var map,tmp=[];
        /* 
            場所の境界は以下のページで住所空検索できます。
            http://phpjavascriptroom.com/example7.php?f=include/ajax/gmapv3/geocoding/geocoding.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#
        */
        /* 表参道 */
        var lat=35.665247;
        var lng=39.712314;
        /* 境界 */
        var sw_lat=35.657386;
        var sw_lng=139.70300099999997;
        var ne_lat=35.67244;
        var ne_lng=139.72109899999998;
        var sw=new google.maps.LatLng(sw_lat,sw_lng);
        var ne=new google.maps.LatLng(ne_lat,ne_lng);
        var bounds=new google.maps.LatLngBounds(sw,ne);
        
        $(function(){
            /* 地図初期化 */
            var myLatlng=new google.maps.LatLng(35.665247,139.712314);
            var myOptions={
                zoom:15,
                center: myLatlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                draggable:true
            };
            function initialize(){
                /* 地図オブジェクト */
                map=new google.maps.Map(document.getElementById("map"), myOptions);
                map.fitBounds(bounds);
                /* 地図をクリックしたときに情報ウィンドウを閉じる */
                google.maps.event.addListener(map, 'click', function() {
                    clear();
                });
            }
            initialize();
            /* Panoramio API */
            var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
            var data={
                order:"popularity",
                set:"public",
                from:0,
                to:24,
                minx:sw_lng,
                miny:sw_lat,
                maxx:ne_lng,
                maxy:ne_lat,
                size:"small",
                mapfilter:true,
                ts:new Date().getTime()
            }
            /* jQueryのgetJSONで写真セットのJSONデータを取得 */
            $.getJSON(url,data,function(json){
                for(var i in json.photos){
                    showMarker(i,json.photos[i]);
                }
            });
            function showMarker(i,pdata){
                /* 各写真の位置にマーカーを立てる */
                var myLatlng=new google.maps.LatLng(pdata.latitude,pdata.longitude);
                /* マーカーアイコン（http://mapicons.nicolasmollet.com/） */
                var image = '/content/demo/geolocation/camera.png';
                var marker=new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    icon: image,
                    title:pdata.photo_title
                });
                /* 情報ウィンドウにPanoramioの写真表示 */
                var contentString='<div id="infowin">'+
'<div class="inner"><a href="http://www.panoramio.com/" target="_blank"><img src="/content/demo/geolocation/logo-small.gif" width="119" height="25" alt="Panoramio logo" /><\/a><br>'+
'<a href="'+pdata.photo_url+'" target="_blank"><img width="'+pdata.width+'" height="'+pdata.height+'" src="'+pdata.photo_file_url+'"/><\/a></\div>'+
'<p><a target="_blank" class="photo_title" href="'+pdata.photo_url+'"><strong>'+pdata.photo_title+'<\/strong><\/a><br>'+
'by <a target="_blank" href="'+pdata.owner_url+'">'+pdata.owner_name+'<\/a><\/p><\/div>';
                /* マーカーがクリックされた時に情報ウィンドウ表示 */
                google.maps.event.addListener(marker, 'click', function() {
                    clear(); /* いったんすべての情報ウィンドウを閉じる */
                    var infowindow=new google.maps.InfoWindow({
                        content: contentString
                    });
                    infowindow.open(map, marker);
                    tmp[i]=infowindow;    /* 情報ウィンドウオブジェクト格納 */
                    
                });
            }
            /* 情報ウィンドウをすべて閉じる */
            function clear(){
                for(var i in tmp){
                    if(tmp[i]){
                        tmp[i].close();
                    }
                }
            }
        });
    </script>
    <style>
        * {
            margin:0; padding:0;
            font-size:12px;
        }
        body {
            line-height:1.2;
            margin:20px;
        }
        #box {
            margin:0 0 20px 0; padding:0;
            width:498px;
        }
        #box h2 {
            margin:0; padding:0;
            font-size:13px;
        }
        #box p.license {
            font-size:11px;
            text-align:center;
        }
        #infowin {
            margin:0; padding:0;
            font-size:12px;
            line-height:1.2;
        }
        #infowin div.inner {
            text-align:center;
        }
        #infowin p {
            margin:0; padding:0;
            overflow:hidden;
        }
        #map {
            width:498px; height:498px;
            margin:0 0 5px 0; padding:0;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>表参道周辺の写真</h2>
        <p>地図上マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。</p>
        <div id="map"></div>
        <p class="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</p>
    </div>
</body>
</html>

現在位置周辺のPanoramio写真をGoogleマップ上に表示
HTML5 Geolocation API使用

2012/5/17

HTML5のGeolocation APIで現在位置（緯度・経度）を取得し、その周辺のPanoramio写真をGoogleマップ上に表示するサンプルです。マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。

設置サンプルサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Geolocation API x Googleマップ</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <style>
        * {
            margin:0; padding:0;
        }
        html,body{
            width:100%; height:100%;
        }
        body {
            font-size:12px;
            line-height:1.2;
        }
        #map {
            width:100%; height:100%;
            margin:0; padding:0;
        }
        #support {
            color:red;
            display:none;
        }
        #infowin div.inner {
            text-align:center;
            background:url("/content/demo/geolocation/loading.gif") no-repeat center 40%;
        }
        #license {
            margin:0; padding:0;
            height:12px;
            font-size:8px;
            line-height:12px;
            text-align:center;
            color:#666;
        }
    </style>
    <script type="text/javascript">
        /*
            HTML5のGeolocation APIを使用して、現在位置を取得し、Googleマップ上に現在位置周辺のPanoramio写真を表示するサンプルです。
            Googleマップ上の赤いマーカーが現在位置です。
            赤いマーカーの位置をドラッグすると、その場所の周辺写真を再取得します。
            青いカメラマーカーをクリックすると情報ウィンドウでPanoramio写真を表示します。
        */
        $(function(){
            $("#map").height($("#map").height()-12);
            /* 初期値 */
            var map,marker,tmp=[],tmp2=[];
            /* 
                住所からの緯度・経度、境界は以下のページで取得できます。
                http://phpjavascriptroom.com/example7.php?f=include/ajax/gmapv3/geocoding/geocoding.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#
            */
            var lat=35.665247;                /* 緯度 */
            var lng=139.712314;                /* 経度 */
            var sw_lat=35.657386;            /* 南西の境界の緯度 */
            var sw_lng=139.70300099999997;    /* 南西の境界の経度 */
            var ne_lat=35.67244;            /* 北東の境界の緯度 */
            var ne_lng=139.72109899999998;    /* 北東の境界の経度 */
            var myLatlng=new google.maps.LatLng(lat,lng);

            /* 境界からの差分（Panoramio用に） */
            var sw_lat_diff=sw_lat-lat;
            var sw_lng_diff=sw_lng-lng;
            var ne_lat_diff=ne_lat-lat;
            var ne_lng_diff=ne_lng-lng;

            /* ウィンドウを読み込んだときに、地図を描画 */
            $(window).load(function(){
                initialize();
            });
            if(!navigator.geolocation){
                /* Geolocation API利用不可の場合 */
                $("#support").html("Geolocation APIの利用不可").show();
            }else{
                /* Geolocation API利用可の場合 */
                navigator.geolocation.getCurrentPosition(
                    positionCallback,
                    positionErrorCallback,
                    {
                        /* 精度の高い位置情報を取得無 */
                        enableHighAccuracy:true,
                        /* タイムアウトまでの時間（ミリ秒） */
                        timeout:6000,
                        /* 位置情報の有効期限（ミリ秒） */
                        maximumAge:0
                    }
                );
            }
            /* ユーザーの現在位置情報取得 */
            function positionCallback(position) {
                var s="";
                /* 現在位置更新 */
                lat=position.coords.latitude;
                lng=position.coords.longitude;
                myLatlng=new google.maps.LatLng(lat,lng);
                chgMapCenter();
            }
            /* 位置情報の取得に失敗した場合 */
            function positionErrorCallback(positionError){
                var s="";
                switch(positionError.code){
                    case 1:
                        /* PERMISSION_DENIED */
                        s="Geolocation APIを使用が許可されていないため、位置が取得できませんでした。\nそのため「表参道」の緯度・経度で表示しています。";
                        break;
                    case 2:
                        /* POSITION_UNAVAILABLE */
                        s="デバイスの位置を特定できませんでした。\nそのため「表参道」の緯度・経度で表示しています。";
                        break;
                    case 3:
                        /* TIMEOUT */
                        s="タイムアウトしました。電波が悪いのかもしれません。何度かリロードしてみてください。\nそのため「表参道」の緯度・経度で表示しています。";
                        break;
                    defaut:
                        break;
                }
                alert(s);
            }
            /* 地図初期化 */
            function initialize(){
                var myOptions={
                    zoom:15,
                    center: myLatlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                map=new google.maps.Map(document.getElementById("map"), myOptions);
                /* 現在の場所にマーカー（デフォルトの赤いピン）を立てる */
                marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    draggable:true
                   });
                chgMapCenter();
                google.maps.event.addListener(marker, 'click', function() {
                    clear(); /* いったんすべての情報ウィンドウを閉じる */
                    var infowindow=new google.maps.InfoWindow({
                        content: "現在いるところ"
                    });
                    infowindow.open(map, marker);
                    tmp["a"]=infowindow; /* 情報ウィンドウオブジェクト格納 */
                });
                /* マーカーをドラッグした時、ドラッグした場所周辺のPanoramio写真を表示 */
                google.maps.event.addListener(marker, 'dragend', function() {
                    lat=marker.getPosition().lat();
                    lng=marker.getPosition().lng();
                    myLatlng=new google.maps.LatLng(lat,lng);
                    chgMapCenter();
                });
            }
            /* Panoramioの写真表示 */
            function showPanoramio(){
                clear_marker(); /* いったんすべてのマーカーを削除する */
                 /* Panoramio API */
                var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
                var data={
                    set:"public",
                    from:0,
                    to:22,
                    minx:lng+sw_lng_diff,
                    miny:lat+sw_lat_diff,
                    maxx:lng+ne_lng_diff,
                    maxy:lat+ne_lat_diff,
                    size:"small",
                    mapfilter:true,
                    ts: new Date().getTime()
                }
                /* jQueryのgetJSONで写真セットのJSONデータを取得 */
                $.getJSON(url,data,function(json){
                    for(var i in json.photos){
                        showInfoWindow(i,json.photos[i]);
                    }
                });
            }
            /* 情報ウィンドウ */
            function showInfoWindow(i,pdata){
                /* 各写真の位置にカメラマーカーを立てる */
                var marker_latlng=new google.maps.LatLng(pdata.latitude,pdata.longitude);
                var image = '/content/demo/geolocation/camera.png';
                var markers=new google.maps.Marker({
                    position: marker_latlng,
                    map: map,
                    icon: image,
                    title:pdata.photo_title
                });
                tmp2[i]=markers;
                /* 情報ウィンドウ内にPanoramioの写真表示 */
                var contentString='<div id="infowin" style="height:'+(pdata.height+60)+'px">'+
'<div class="inner"><a href="http://www.panoramio.com/" target="_blank"><img src="/content/demo/geolocation/logo-small.gif" width="119" height="25" alt="Panoramio logo" /><\/a><br>'+
'<a href="'+pdata.photo_url+'" target="_blank"><img width="'+pdata.width+'" height="'+pdata.height+'" src="'+pdata.photo_file_url+'"/><\/a></div>'+
'<p><a target="_blank" class="photo_title" href="'+pdata.photo_url+'"><strong>'+pdata.photo_title+'<\/strong><\/a><br>'+
'by <a target="_blank" href="'+pdata.owner_url+'">'+pdata.owner_name+'<\/a><\/p><\/div>';
                /* マーカーがクリックされた時に情報ウィンドウ表示 */
                google.maps.event.addListener(markers, 'click', function() {
                    clear(); /* いったんすべての情報ウィンドウを閉じる */
                    var infowindows=new google.maps.InfoWindow({
                        content: contentString
                    });
                    infowindows.open(map, markers);
                    tmp[i]=infowindows;    /* 情報ウィンドウオブジェクト格納 */
                });
            }
            /* マーカー全削除 */
            function clear_marker(){
                for(var i in tmp2){
                    if(tmp2[i]){
                        tmp2[i].setMap(null);
                    }
                }
            }
            /* 情報ウィンドウをすべて閉じる */
            function clear(){
                for(var i in tmp){
                    if(tmp[i]){
                        tmp[i].close();
                    }
                }
            }
            /* 地図の中心地点変更 */
            function chgMapCenter(){
                map.setCenter(myLatlng);
                marker.setPosition(myLatlng);
                showPanoramio();
            }
         });
     </script>
</head>
<body>
     <p id="support"></p>
     <p id="errmsg"></p>
     <div id="map"></div>
     <div id="license">Panoramio 提供の写真の著作権はそのオーナーに帰属します。</div>
</body>
</html>

Panoramio Panoramio Widget API：HTMLテンプレート（iframe版）

PHP & JavaScript Room

PanoramioPanoramio API

Panoramioについて

Panoramio APIの使い方
パラメータ

構文

パラメータ

戻り値

Panoramio写真をサイトに表示する際の注意点

表示例

API制限

指定した場所周辺のPanoramio写真を1枚だけ表示
中サイズ

指定した場所周辺のPanoramio写真をギャラリー表示
正方形サイズ

マーカークリックでその場所のPanoramio写真を情報ウィンドウで表示
Googleマップ使用

現在位置周辺のPanoramio写真をGoogleマップ上に表示
HTML5 Geolocation API使用

関連コンテンツ

PanoramioPanoramio API

Panoramioについて

Panoramio APIの使い方パラメータ

構文

パラメータ

戻り値

Panoramio写真をサイトに表示する際の注意点

表示例

API制限

指定した場所周辺のPanoramio写真を1枚だけ表示中サイズ

指定した場所周辺のPanoramio写真をギャラリー表示正方形サイズ

マーカークリックでその場所のPanoramio写真を情報ウィンドウで表示Googleマップ使用

現在位置周辺のPanoramio写真をGoogleマップ上に表示HTML5 Geolocation API使用

関連コンテンツ

Panoramio APIの使い方
パラメータ

指定した場所周辺のPanoramio写真を1枚だけ表示
中サイズ

指定した場所周辺のPanoramio写真をギャラリー表示
正方形サイズ

マーカークリックでその場所のPanoramio写真を情報ウィンドウで表示
Googleマップ使用

現在位置周辺のPanoramio写真をGoogleマップ上に表示
HTML5 Geolocation API使用