Panoramio Widget API：JavaScript API｜Panoramio｜Web関連特集

TOP Web関連特集Panoramio Widget API：JavaScript API

JavaScriptライブラリでPanoramioウィジェットをカスタマイズ
リクエスト〔指定した条件の写真セットを取得〕
単一写真ウィジェット
写真リストウィジェット
イベント〔デフォルトイベントの動作を制御〕
写真オブジェクト〔現在表示されている写真情報を取得〕
属性ブロック〔著作権表示の表示スタイルを指定〕
例：ウィジェット内のテキスト表示などの言語を明示〔hlパラメータ〕
例：指定した写真セットを表示〔set+rect併用、セット切替〕
例：指定したタグが付いている写真セットを表示〔tag+rect併用、タグ切替〕
例：指定したユーザーが撮影した写真セットを新しい順に表示〔user+order併用、順序切替〕
例：指定したエリア内で特定のタグが付いている写真セットを表示〔tag+rect併用、エリア切替〕
例：指定した写真グループの写真セットを新しい順に表示〔group+order併用、グループ切替〕
例：指定したユーザーの任意の写真を1枚表示〔ids使用〕
例：任意の写真セットを表示〔ids使用〕
例：クリックした写真情報を取得し、撮影場所をストリートビュー表示〔Googleマップ連動〕

JavaScriptライブラリでPanoramioウィジェットをカスタマイズ

2012/5/17

HTMLテンプレートのiframe版ではあらかじめ用意されているオプションの範囲でしかカスタマイズしかできませんが、 JavaScriptライブラリを使用すると、ウィジェットの見た目や動作を制御できます。

組み込み手順

まず、JavaScriptライブラリをhead要素内に読み込みます。
※言語を指定する場合はhlパラメータを付加します。

<script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1'></script>

次に、body要素内に、ウィジェットを表示する領域を定義し、ウィジェットを生成して表示します。
以下は、写真リストウィジェットの場合の記述例です。

<div id='wapiblock'><-- ウィジェットの表示領域 --></div>
<script type='text/javascript'>
/* リクエスト：取得する写真を指定 */
var myRequest = {
  'tag': 'france, hotel',
  'rect': {
    'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 
    'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}
  }
};
/* ウィジェットの見た目を指定　※ウィジェットの種類によって異なります */
var myOptions = {
  'width':340,
  'height':220,
  'columns': 5,
  'rows':3,
  'croppedPhotos':true
}
/* 写真リストウィジェット生成 */
var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
/* ウィジェット表示 */
/* 写真の表示開始位置を指定（先頭から） */
widget.setPosition(0);
</script>

リクエスト
指定した条件の写真セットを取得

2012/5/17

var myRequest = {
	"tag": "france, hotel",
	"rect": {
		'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 
		'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}
	}
};

リクエストオブジェクトの値

無効なオプションを指定すると例外（panoramio.InvalidPhotoRequestError）が発生します。

名前	説明
set	指定した名前の写真セットを選択。 ▼指定可能な値「panoramio.PhotoSet.ALL」（すべての写真）「panoramio.PhotoSet.PUBLIC」（Google Earth用に選択されたすべての写真）「panoramio.PhotoSet.RECENT」（最近アップロードされた写真）
tag	指定したタグが付けられた写真を選択。カンマ区切りで複数のタグを指定可能です。 ※その場合、タグ名にそれらの単語が両方含まれるものがヒットします。
user	指定したユーザID（数値）のユーザーの写真をすべて選択。
group	指定したグループID（数値）のグループにある写真をすべて選択。 →Panoramioのグループ一覧
ids	指定した写真セットを選択。写真セットには各写真（その写真の写真ID、ユーザーID）を配列で指定。写真は配列に指定された順序に表示されます。
rect	指定したエリア内にある写真を表示。エリアは西南(sw)と北東（ne）で指定した矩形領域で、それぞれ緯度・経度を指定。 ※idsオプションとの併用不可。
order	写真の表示順序を指定。指定可能な値は、「panoramio.PhotoOrder.DATE_DESC」（新→古しい写真の順）、「panoramio.PhotoOrder.DATE」（古→新しい写真の順、デフォルト）のいずれか。 ※userオプションと併用。 ※rectオプションとの併用不可。

※setとtag、setとgroupの併用はできないようです。

単一写真ウィジェット

2012/5/17

リクエストで取得した写真セットから一度に1枚の写真を表示します。
結果の写真セットが複数枚ある場合は、矢印ボタンが表示され、前後の写真に移動できます。

PhotoWidgetのオプション

オプション	説明
width	ウィジェットの幅をピクセル単位で指定。
height	ウィジェットの幅をピクセル単位で指定。 ※写真下部の著作権表記部分も含めてのサイズとなります。
croppedPhotos	トリミングした写真を使用するかを指定。 ▼指定可能な値｢panoramio.Cropping.NO_CROPPING｣or｢false｣(ﾄﾘﾐﾝｸﾞしない)※ﾃﾞﾌｫﾙﾄ｢panoramio.Cropping.TO_SQUARE｣or｢true｣(ﾄﾘﾐﾝｸﾞ)※正方形ｻｲｽﾞ｢panoramio.Cropping.TO_FILL｣(画像を領域いっぱいに表示してﾄﾘﾐﾝｸﾞ)※ｻﾝﾌﾟﾙ ※写真リストウィジェットの場合は、トリミングしないと右下のように写真の大きさがバラバラになるのでトリミングを有効にした方がよいです。
attributionStyle	属性ブロックの表示スタイルを指定。 ▼指定可能な値｢panoramiio.tos.Style.DEFAULT｣(表示)※ﾃﾞﾌｫﾙﾄ｢panoramio.tos.Style.DEFAULT_ADD｣(表示)※属性ブロックの高さを追加｢panoramiio.tos.Style.HIDDEN｣(非表示)
disableDefaultEvents	デフォルトのイベントをすべて無効にするかの有無を指定。一部だけ無効にする場合は無効にするイベントを配列で指定。

PhotoWidgetのメソッド

ウィジェットを生成してもすぐに写真は表示されません。 SetPositionメソッドを呼ぶと開始されます。

メソッド	説明
enableNextArrow	次へ矢印を表示するかの有無を指定。デフォルトは「true」（表示）。
enablePreviousArrow	前へ矢印を表示するかの有無を指定。デフォルトは「true」（表示）。
getAtEnd	ウィジェットが写真セットの末尾にあるかチェック。
getAtStart	ウィジェットが写真セットの先頭にあるかチェック。
getPhoto	現在表示されている写真の情報を取得。
getPosition	写真セット内における現在の写真の位置を取得。
setPosition	写真セット内の別の場所に移動して、その写真を表示。先頭は0番目。
setRequest	写真を取得して使用するためのリクエストを定義。

設置サンプル

パリで撮影されたPanoramioの写真の中から、「cafe」というタグが付けられた写真セットを単一写真リストウィジェットで表示します。

設置サンプル: Panoramio Javascript API - Photo Widgetサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions = {
                "width":320,            /* ウィジェットの幅(px) */
                "height":220,            /* ウィジェットの高さ(px) */
                "croppedPhotos":false    /* 写真トリミング無効 */
            }
            /* リクエストを指定 */
            var myRequest = {
                /* エリア：フランス パリ */
                "rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
                /* タグ：'cafe' */
                "tag": "cafe"
            };
            /* 単一写真ウィジェットを生成 */
            var widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
            /* ウィジェットを表示 */
            /* 写真の表示開始位置を指定 */
            widget.setPosition(6);
        });
    </script>
    <style type="text/css">
        /* ウィジェットのスタイル指定 */
        #wapiblock .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>単一写真ウィジェット</h2>
    <p>パリで撮影されたPanoramioの写真の中から、「cafe」というタグが付けられた写真セットを単一写真ウィジェットで表示。</p>
    <hr />
    <h3 class="title_camera">パリにあるカフェの写真</h3>
    <div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
</body>
</html>

写真リストウィジェット

2012/5/17

リクエストで取得した写真セットから一度に複数の写真を表示します。
ウィジェットの列数（columns）×行数（rows）で、一度に表示する写真の枚数が決まります。

結果の写真セットに含まれる写真の数が、ウィジェットの列×行数を超える場合は、矢印ボタンが表示され、前後に移動できます。

PhotoListWidgetのオプション

オプション	説明
width	ウィジェットの幅をピクセル単位で指定。
height	ウィジェットの幅をピクセル単位で指定。 ※写真下部の著作権表記部分も含めてのサイズとなります。
croppedPhotos	トリミングした写真を使用するかを指定。 ▼指定可能な値「panoramio.Cropping.NO_CROPPING」or「false」（トリミングしない）※デフォルト「panoramio.Cropping.TO_SQUARE」or「true」（トリミング）※正方形サイズ「panoramio.Cropping.TO_FILL」（画像を領域いっぱいに表示してトリミング）※サンプル ※写真リストウィジェットの場合は、トリミングしないと右下のように写真の大きさがバラバラになるのでトリミングを有効にした方がよいです。
columns	写真リストウィジェットに表示する写真の列数を数値で指定。
rows	写真リストウィジェットに表示する写真の行数を数値で指定。
orientation	リストの方向を指定。これによって矢印位置、スクロール方向などが決まります。 ▼指定可能な値「vertical」（垂直方向）「horizontal」（水平方向）　※デフォルト

PhotoListWidgetのメソッド

ウィジェットを生成してもすぐに写真は表示されません。 SetPositionメソッドを呼ぶと開始されます。

メソッド	説明
enableNextArrow	次へ矢印を表示するかの有無を指定。デフォルトは「true」（表示）。
enablePreviousArrow	前へ矢印を表示するかの有無を指定。デフォルトは「true」（表示）。
getAtEnd	ウィジェットが写真セットの末尾にあるかチェック。
getAtStart	ウィジェットが写真セットの先頭にあるかチェック。
getPhoto	現在表示されている写真の情報を取得。
getPosition	写真セット内における現在の写真の位置を取得。
setPosition	写真セット内の別の場所に移動して、その写真を表示。先頭は0番目。
setRequest	写真を取得して使用するためのリクエストを定義。

設置サンプル

パリで撮影されたPanoramioの写真の中から、「restaurant」というタグが付けられた写真セットを写真リストウィジェットで表示します。写真の開始番号には6を設定。

設置サンプル: Panoramio Javascript API - Photo Widgetサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":4,
                "rows":3,    
                "orientation":"horizontal"    /* 垂直方向 */
            }
            var myOptions2 = {
                "width":220,                /* ウィジェットの幅(px) */
                "height":350,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":3,
                "rows":4,    
                "orientation":"vertical"    /* 水平方向 */
            }
            /* リクエストを指定 */
            var myRequest = {
                /* エリア：フランス パリ */
                "rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
                /* タグ：'cafe' */
                "tag": "restaurant"
            };
            /* 写真リストウィジェットを生成 */
            var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
            var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
            /* ウィジェットを表示 */
            /* 写真の表示開始位置を指定 */
            widget.setPosition(0);
            widget2.setPosition(0);
        });
    </script>
    <style type="text/css">
        /* ウィジェットのスタイル指定 */
        #wapiblock2 .panoramio-wapi-photolist,
        #wapiblock .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock2 .panoramio-wapi-images,
        #wapiblock .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>写真リストウィジェット</h2>
    <p>パリで撮影されたPanoramioの写真の中から、「restaurant」というタグが付けられた写真セットを写真リストウィジェットで表示。</p>
    <hr />
    <h3>horizontal</h3>
    <div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
    <hr />
    <h3>vertical</h3>
    <div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
</body>
</html>

イベント
デフォルトイベントの動作を制御

2012/5/17

ユーザーがクリックしたり、マウスを動かしたり、キーを押したり、ページに訪れた時などの、Webページ上でのイベントが受け取れます。

構文

panoramio.events.listen(ウィジェット, イベントタイプ,  function(event){
  /* 処理 */
});

イベントタイプ

Widget APIは、自動的にブラウザのイベントを合成イベントに変換します。
定義されているイベントは以下の通り。
デフォルトでこれらの動作は有効になっています。

イベント	説明
panoramio.events.EventType.PREVIOUS_CLICKED	ユーザーが前へ矢印をクリックした時
panoramio.events.EventType.NEXT_CLICKED	ユーザーが次へ矢印をクリックした時
panoramio.events.EventType.PHOTO_CHANGED	Widget APIの写真の読み込みが完了した時。前後への写真移動などでウィジェット上に表示されている写真が変更された時。
panoramio.events.EventType.PHOTO_CLICKED	ユーザーが写真をクリックした時

デフォルトの動作は一部またはすべてを無効にできます。全て無効にする場合は、PhotoWidgetとPhotoListWidgetのオプションのdisableDefaultEventsに「false」を指定します。
⇒サンプルはこちら。

例えば、写真をクリックした時、写真ページを別ウィンドウで表示させたい場合は、デフォルト動作のPHOTO_CHANGEDだけを無効にし、独自のビヘイビアを提供します。
⇒サンプルはこちら。

設置サンプル - デフォルトイベントを有効・無効化

設置サンプル: Panoramio Javascript API - Eventサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions1 = {
                "width":320,                    /* ウィジェットの幅(px) */
                "height":220,                    /* ウィジェットの高さ(px) */
                "croppedPhotos":true,            /* 写真トリミング有効 */
                "columns":4,
                "rows":3,
                "disableDefaultEvents":true        /* デフォルトイベント無効化 */
            }
            var myOptions2 = {
                "width":320,                    /* ウィジェットの幅(px) */
                "height":220,                    /* ウィジェットの高さ(px) */
                "croppedPhotos":true,            /* 写真トリミング有効 */
                "columns":4,
                "rows":3,
                "disableDefaultEvents":false    /* デフォルトイベント無効化 */
            }
            var myOptions3 = {
                "width":320,                    /* ウィジェットの幅(px) */
                "height":220,                    /* ウィジェットの高さ(px) */
                "croppedPhotos":true,            /* 写真トリミング有効 */
                "columns":4,
                "rows":3,
                "disableDefaultEvents":[        /* 一部のデフォルトイベント無効化 */
                    panoramio.events.EventType.PREVIOUS_CLICKED,
                    panoramio.events.EventType.PHOTO_CLICKED
                ]
            }
            /* リクエストを指定 */
            var myRequest = {
                /* エリア：フランス パリ */
                "rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
                /* タグ：'cafe' */
                "tag": "restaurant"
            };
            /* 写真リストウィジェットを生成 */
            var widget1 = new panoramio.PhotoListWidget('wapiblock1', myRequest, myOptions1);
            var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
            var widget3 = new panoramio.PhotoListWidget('wapiblock3', myRequest, myOptions3);
            /* ウィジェットを表示 */
            /* 写真の表示開始位置を指定 */
            widget1.setPosition(12);
            widget2.setPosition(12);
            widget3.setPosition(12);
            
            /* 写真がクリックされた時 */
            function photoClicked(event,f) {
                res('写真がクリックされました　"' + event.getPhoto().getPhotoTitle() + '"',f);
            }
            panoramio.events.listen(widget3, panoramio.events.EventType.PHOTO_CLICKED,  function(event){
                photoClicked(event,3);
            });
            panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED,  function(event){
                photoClicked(event,2);
            });
            panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CLICKED,  function(event){
                photoClicked(event,1);
            });

            /* 前へ矢印がクリックされた時 */
            function previousClicked(event,f) {
                res('前へ矢印がクリックされました',f);
            }
            panoramio.events.listen(widget3, panoramio.events.EventType.PREVIOUS_CLICKED,  function(event){
                previousClicked(event,3);
            });
            panoramio.events.listen(widget2, panoramio.events.EventType.PREVIOUS_CLICKED,  function(event){
                previousClicked(event,2);
            });
            panoramio.events.listen(widget1, panoramio.events.EventType.PREVIOUS_CLICKED,  function(event){
                previousClicked(event,1);
            });

            /* 次へ矢印がクリックされた時 */
            function nextClicked(event,f) {
                res('次へ矢印がクリックされました',f);
            }
            panoramio.events.listen(widget3, panoramio.events.EventType.NEXT_CLICKED,  function(event){
                nextClicked(event,3);
            });
            panoramio.events.listen(widget2, panoramio.events.EventType.NEXT_CLICKED,  function(event){
                nextClicked(event,2);
            });
            panoramio.events.listen(widget1, panoramio.events.EventType.NEXT_CLICKED,  function(event){
                nextClicked(event,1);
            });

            /* 写真が変更された時 */
            function photoChanged(event,f) {
                res("写真が変更されました",f);
            }
            panoramio.events.listen(widget3, panoramio.events.EventType.PHOTO_CHANGED, function(event){
                photoChanged(event,3);
            });
            panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CHANGED, function(event){
                photoChanged(event,2);
            });
            panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CHANGED, function(event){
                photoChanged(event,1);
            });
            function res(str,f){
                $("#res"+f).prepend(str+"\n\n");
            }
        });
    </script>
    <style type="text/css">
        /* ウィジェットのスタイル指定 */
        #wapiblock3 .panoramio-wapi-photolist,
        #wapiblock2 .panoramio-wapi-photolist,
        #wapiblock1 .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock3 .panoramio-wapi-images,
        #wapiblock2 .panoramio-wapi-images,
        #wapiblock1 .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
        .box {
            float:left;
            width:48%;
            margin:0; padding:0;
        }
        textarea {
            width:320px; height:100px;
            font-size:6px;
            line-height:1.2;
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>イベント</h2>
    <p>デフォルトイベントを有効化・無効化、一部だけ無効化したウィジェットです。</p>
    <hr />
    <div class="cf" style="width:700px">
        <div class="box">
            <h3>disableDefaultEvents:true</h3>
            <p>デフォルトの動作を無効化</p>
            <div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
            <textarea id="res1"></textarea>
        </div>
        <div class="box">
            <h3>disableDefaultEvents:false</h3>
            <p>デフォルトの動作を有効化</p>
            <div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
            <textarea id="res2"></textarea>
        </div>
    </div>
    <hr />
    <h3>disableDefaultEvents:[...]</h3>
    <p>デフォルトの動作の一部(前ボタン、写真クリック)を無効化<br>写真ページを別窓で開く</p>
    <div id="wapiblock3"><!-- ウィジェットの表示領域 --></div>
    <textarea id="res3"></textarea>
</body>
</html>

設置サンプル - 一部のデフォルトイベントを無効化

写真をクリックした時の「panoramio.events.EventType.PHOTO_CLICKED」を無効化し、写真ページを別ウィンドウで開きます。

設置サンプル: Panoramio Javascript API - Eventサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":4,
                "rows":3,
                "disableDefaultEvents":[    /* 一部のデフォルトイベント無効化 */
                    panoramio.events.EventType.PHOTO_CLICKED
                ]
            }
            /* リクエストを指定 */
            var myRequest = {
                /* エリア：フランス パリ */
                "rect": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
                /* タグ：'cafe' */
                "tag": "restaurant"
            };
            /* 写真リストウィジェットを生成 */
            var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
            /* ウィジェットを表示 */
            /* 写真の表示開始位置を指定 */
            widget.setPosition(0);
            
            /* 写真がクリックされた時 */
            function photoClicked(event) {
                $("#res").prepend('写真がクリックされました　"' + event.getPhoto().getPhotoUrl() + '"'+"\n\n");
                //写真ページを別窓で開く
                window.open(event.getPhoto().getPhotoUrl());
            }
            panoramio.events.listen(widget, panoramio.events.EventType.PHOTO_CLICKED,  photoClicked);
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
        textarea {
            width:320px; height:100px;
            font-size:6px;
            line-height:1.2;
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>イベント</h2>
    <p>写真をクリックした時の「panoramio.events.EventType.PHOTO_CLICKED」を無効化し、写真ページを別ウィンドウで開きます。</p>
    <hr />
    <h3 class="title_camera">パリにあるカフェの写真</h3>
    <div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
    <textarea id="res"></textarea>
</body>
</html>

写真オブジェクト
現在表示されている写真情報を取得

2012/5/17

写真オブジェクトは、Panoramioの写真に関する情報が含まれているオブジェクトです。

ウィジェットが現在表示している（単一または複数の）写真の写真情報を取得するには、 PhotoWidgetのgetPhotoメソッド、PhotoListWidgetのgetPhotosメソッドを使用します。

クリックした写真の情報も、panoramio.PhotoClickedEventで取得できます。この合成イベントは、getPhotoメソッドを持つpanoramio.Photoオブジェクトを返します。

Photoオブジェクトのメソッド

メソッド	説明
getPhotoId	Panoramioの写真IDを返す。
getPhotoTitle	写真のタイトルを返す。
getPhotoUrl	写真のPanoramio写真ページのURLを返す。
getPosition	写真の位置を返す（先頭は0始まり）。
getOwnerId	撮影者のユーザーIDを返す。
getOwnerName	撮影者の名前を返す。
getOwnerUrl	写真の所有者のPanoramioのユーザーページのURLを返す。
getWidth	オリジナル写真の幅をピクセル単位で返す。
getHeight	オリジナル写真の高さをピクセル単位で返す。

設置サンプル - 現在表示している写真情報を取得

単一写真、写真リストウィジェットに現在表示されている写真情報を取得して表示します。
前後ボタンをクリックすると、下記の情報が変わります。
ウィジェット内には表参道で最近撮影された写真を表示しています。

設置サンプル: Panoramio Javascript API - photo Objectサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions1 = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":panoramio.Cropping.TO_FILL
            }
            var myOptions2 = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":4,
                "rows":3
            }
            /* リクエストを指定 */
            var myRequest = {
                /* ウィジェット内には表参道で最近撮影された写真を表示 */
                "set":panoramio.PhotoSet.RECENT,
                "rect":{'sw':{'lat':35.657386,'lng':139.70300099999997},'ne':{'lat':35.67244,'lng':139.72109899999998}}
            };
            /* 単一写真ウィジェットを生成 */
            var widget1 = new panoramio.PhotoWidget('wapiblock1', myRequest, myOptions1);
            /* 写真リストウィジェットを生成 */
            var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
            /* ウィジェットを表示 */
            widget1.setPosition(0);
            widget2.setPosition(0);
            /* 表示される写真が変更された時、現在の写真情報を取得 */
            function getPhotoInfo(event,n){
                var s="";
                if(n==1){
                    obj=widget1.getPhoto();
                }else{
                    obj=widget2.getPhotos();
                }
                console.log(obj.length);
                if(obj.length>0){
                    for(var i in obj){
                        var photo=obj[i];
                        /* 各写真情報を表示 */
                        s+="写真ID："+photo.getPhotoId()+"\n";
                        s+="写真タイトル："+photo.getPhotoTitle()+"\n";
                        s+="写真ページのURL：<a href='"+photo.getPhotoUrl()+"' target='_blank'>"+photo.getPhotoUrl()+"</a>\n";
                        s+="撮影された場所："+photo.getPosition()["lat"]+", "+photo.getPosition()["lng"]+"\n";
                        s+="撮影者のユーザーID："+photo.getOwnerId()+"\n";
                        s+="撮影者の名前："+photo.getOwnerName()+"\n";
                        s+="オリジナル写真の幅："+photo.getWidth()+"px\n";
                        s+="オリジナル写真の高さ："+photo.getWidth()+"px\n";
                        s+="---------------------------------------------------------\n";
                    }
                }else{
                    /* 各写真情報を表示 */
                    s+="写真ID："+obj.getPhotoId()+"\n";
                    s+="写真タイトル："+obj.getPhotoTitle()+"\n";
                    s+="写真ページのURL：<a href='"+obj.getPhotoUrl()+"' target='_blank'>"+obj.getPhotoUrl()+"</a>\n";
                    s+="撮影された場所："+obj.getPosition()["lat"]+", "+obj.getPosition()["lng"]+"\n";
                    s+="撮影者のユーザーID："+obj.getOwnerId()+"\n";
                    s+="撮影者の名前："+obj.getOwnerName()+"\n";
                    s+="オリジナル写真の幅："+obj.getWidth()+"px\n";
                    s+="オリジナル写真の高さ："+obj.getWidth()+"px\n";
                    s+="---------------------------------------------------------\n";
                }
                $("#res"+n).html(s);
            }
            panoramio.events.listen(widget1, panoramio.events.EventType.PHOTO_CHANGED, function(event){
                getPhotoInfo(event,1);
            });
            panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CHANGED, function(event){
                getPhotoInfo(event,2);
            });
        });
    </script>
    <style type="text/css">
        #wapiblock2 .panoramio-wapi-photolist,
        #wapiblock1 .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock2 .panoramio-wapi-images,
        #wapiblock1 .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
        .box {
            width:320px;
            float:left;
        }
        .box pre {
            width:320px;
            font-size:6px;
            margin:0; padding:10px;
            line-height:1.2;
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>写真オブジェクト</h2>
    <p>
        ウィジェットに現在表示されている写真情報を取得して表示します。<br>
        前後ボタンをクリックすると、下記の情報が変わります。<br>
        ウィジェット内には表参道で最近撮影された写真を表示しています。
    </p>
    <hr />
    <div class="cf" style="width:700px;">
        <div class="box">
            <h3>単一写真ウィジェット</h3>
            <div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
            <pre id="res1"></pre>
        </div>
        <div class="box" style="float:right;">
            <h3>写真リストウィジェット</h3>
            <div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
            <pre id="res2"></pre>
        </div>
    </div>
</body>
</html>

設置サンプル - クリックした写真情報を取得

クリックした写真の情報を表示し、撮影された場所のストリートビューを表示します。
※写真のクリックイベントはログ出力のため仮で無効にしてあります。

⇒サンプルを見る

属性ブロック
著作権表示の表示スタイルを指定

2012/5/17

Panoramioのウィジェットには、規約上、著作権情報を表示する必要があります。特に何もしなければ、Widget APIを使用してウィジェットを組み込むと、この著作権情報が属性ブロックとして自動的にウィジェットの下部に挿入されます。

ただ、レイアウト上、小さいウィジェットをタイル状に並べたり、単一写真＋写真リストウィジェットを組み合わせて表示するといったケースの場合、各ウィジェットに属性ブロックを表示すると右図のようにおかしなことになるので、そういった場合は、ウィジェットのグループ全体に対して属性ブロックを1つだけ表示するようにできます。

属性ウィジェットの表示スタイルは、ウィジェットのattributionStyleオプションで変更できます。

var myOptions = {
  "width":80,
  "height":220,
  "attributionStyle": panoramio.tos.Style.DEFAULT_ADD
}

«属性の表示スタイル»
スタイル	説明
panoramiio.tos.Style.DEFAULT	ウィジェットの下部に、ウィジェットと同じ幅で属性ブロックを表示。ウィジェット全体の高さは、属性ブロック含め、オプションに指定したウィジェットの高さになります。 ※デフォルト。
panoramio.tos.Style.DEFAULT_ADD	ウィジェットの下部に、ウィジェットと同じ幅で属性ブロックを表示。ウィジェット全体の高さは、オプションに指定したウィジェットの高さ＋属性ブロックの高さになります。
panoramiio.tos.Style.HIDDEN	ウィジェットに属性ブロックを表示しない。

DEFAULT

DEFAULT_ADD

HIDDEN

※HIDDENに設定した場合は、panoramio.TermsOfServiceWidgetを使用して、ウィジェットの近くに属性ブロックを表示する必要があります。

設置サンプル - attributionStyle

JavaScriptライブラリを使用して、単一写真ウィジェットを写真ウィジェットを表示するサンプルです。
写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。

以下は、右側の写真リストウィジェットを属性ブロックは非表示にし、左側の単一写真ウィジェットの属性ブロックのみ表示させています。

設置サンプル: Panoramio Javascript API - 属性ブロックサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions1 = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":panoramio.Cropping.TO_FILL,
                "attributionStyle":panoramio.tos.Style.DEFAULT    /* ウィジェットの高さに属性ブロックの高さを追加 */
            }
            var myOptions2 = {
                "width":80,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":1,
                "rows":3,
                "orientation":"vertical",    /* 写真リストの向き(垂直) */
                "attributionStyle": panoramio.tos.Style.HIDDEN,    /* 属性ブロック非表示 */
                "disableDefaultEvents":[    /* 一部のデフォルトイベント無効化 */
                    panoramio.events.EventType.PHOTO_CLICKED
                ]
            }
            /* リクエスト */
            var myRequest = new panoramio.PhotoRequest({
                /* ウィジェット内には最近撮影された写真を表示 */
                "set":panoramio.PhotoSet.RECENT
            });
            /* 単一写真ウィジェットを生成 */
            var widget1 = new panoramio.PhotoWidget('wapiblock1', myRequest, myOptions1);
            /* 写真リストウィジェットを生成 */
            var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
            /* ウィジェットを表示 */
            widget1.setPosition(0);
            widget2.setPosition(0);
            /* 単一写真ウィジェットの前後ボタンを無効化 */
            widget1.enablePreviousArrow(false);
            widget1.enableNextArrow(false);
              /* 写真リストの写真がクリックされた時 */
            panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED, function(event){
                /* クリックされた写真を単一写真ウィジェットに表示 */
                var position = event.getPosition();
                if(position!==null) widget1.setPosition(position);
            });
        });
    </script>
    <style type="text/css">
        #photobox {
            width:400px;
            overflow:hidden;
        }
        #photo {
            width:320px;
            float:left;
        }
        #photolist {
            width:80px;
            float:left;
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>属性ブロック</h2>
    <p>
        JavaScriptライブラリを使用して、単一写真ウィジェットを写真ウィジェットを表示するサンプルです。<br>
        写真リストウィジェットの属性ブロックは非表示にし、単一写真ウィジェットの属性ブロックのみ表示させています。
    </p>
    <p>
        写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。
        単一写真ウィジェットの前後ボタンは無効化しています。
    </p>
    <hr />
    <h3 class="title_camera">Panoramioに最近アップロードされた写真</h3>
    <div id="photobox" class="cf">
        <div id="photo">
            <div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
        </div>
        <div id="photolist" style="float:right;">
            <div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
        </div>
    </div>
</body>
</html>

設置サンプル - TermsOfServiceWidget

すべてのウィジェットの属性ブロックを非表示にし、TermsOfServiceWidgetで新たに生成した属性ブロックを表示するサンプルです。オプションで、ブロックの幅を指定できます。

«TermsOfServiceWidgetのオプション»
オプション	説明
width	属性ブロックの幅をピクセル単位で指定。

設置サンプル: Panoramio Javascript API - 属性ブロックサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=fr'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions1 = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":panoramio.Cropping.TO_FILL,
                "attributionStyle":panoramio.tos.Style.HIDDEN    /* 属性ブロック非表示 */
            }
            var myOptions2 = {
                "width":80,                    /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":1,
                "rows":3,
                "orientation":"vertical",    /* 写真リストの向き(垂直) */
                "attributionStyle": panoramio.tos.Style.HIDDEN,    /* 属性ブロック非表示 */
                "disableDefaultEvents":[    /* 一部のデフォルトイベント無効化 */
                    panoramio.events.EventType.PHOTO_CLICKED
                ]
            }
            /* リクエスト */
            var myRequest = new panoramio.PhotoRequest({
                /* ウィジェット内には最近撮影された写真を表示 */
                "set":panoramio.PhotoSet.RECENT
            });
            /* 単一写真ウィジェットを生成 */
            var widget1 = new panoramio.PhotoWidget('wapiblock1', myRequest, myOptions1);
            /* 写真リストウィジェットを生成 */
            var widget2 = new panoramio.PhotoListWidget('wapiblock2', myRequest, myOptions2);
            /* ウィジェットを表示 */
            widget1.setPosition(0);
            widget2.setPosition(0);
            /* 単一写真ウィジェットの前後ボタンを無効化 */
            widget1.enablePreviousArrow(false);
            widget1.enableNextArrow(false);
            /* 属性ブロックを表示 */
            var attrOption = {'width':500};
            var attrwidget = new panoramio.TermsOfServiceWidget('attrbox', attrOption);
              /* 写真リストの写真がクリックされた時 */
            panoramio.events.listen(widget2, panoramio.events.EventType.PHOTO_CLICKED, function(event){
                /* クリックされた写真を単一写真ウィジェットに表示 */
                var position = event.getPosition();
                if(position!==null){
                    widget1.setPosition(position);
                    if(position>0){
                        widget2.setPosition(position-1);
                    }
                }
                return false;
            });
        });
    </script>
    <style type="text/css">
        #photobox { width:400px; overflow:hidden; }
        #photo { width:320px; float:left; }
        #photolist { width:80px; float:left; }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>属性ブロック</h2>
    <p>
        JavaScriptライブラリを使用して、単一写真ウィジェットを写真ウィジェットを表示するサンプルです。<br>
        写真リストウィジェット、単一写真ウィジェットの属性ブロックを非表示にし、別途属性ブロックを示させています。
    </p>
    <p>
        写真リストの各写真をクリックすると、クリックした写真を単一写真ウィジェットを表示します。<br>
        単一写真ウィジェットの前後ボタンは無効化しています。
    </p>
    <hr />
    <h3 class="title_camera">Panoramioに最近投稿された写真</h3>
    <div id="photobox" class="cf">
        <div id="photo">
            <div id="wapiblock1"><!-- ウィジェットの表示領域 --></div>
        </div>
        <div id="photolist" style="float:right;">
            <div id="wapiblock2"><!-- ウィジェットの表示領域 --></div>
        </div>
    </div>
    <div id="attrbox"><!-- 属性ブロックの表示領域 --></div>
</body>
</html>

例：ウィジェット内のテキスト表示などの言語を明示
hlパラメータ

2012/5/17

ウィジェット内に表示される著作権表記のテキストなどに、適用する言語を明示したい場合は、JavaScriptライブラリを読み込む際に、hlパラメータを付加します。例えば、フランス語なら「hl=fr」、日本語なら「hl=ja」、英語なら「hl=en」。

設置サンプル: Panoramio Javascript API - 言語指定（日本語）サンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* リクエスト */
            var myRequest = {
                /* タグ指定 */
                "tag": "hotel",
                /* エリア指定：東京都の境界((35.528873, 139.51057400000002), (35.817813, 139.91020200000003)) */
                "rect": {'sw': {'lat': 35.528873, 'lng': 139.51057400000002}, 'ne': {'lat': 35.817813, 'lng': 139.91020200000003}}
            };
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":320,
                "height":320,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* 単一写真ウィジェット */
            var wapiblock = document.getElementById('wapiblock');
            var widget = new panoramio.PhotoWidget(wapiblock, myRequest, myOptions);
            console.log(widget);
            widget.setPosition(0);
        });
    </script>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        Panoramiaの写真で東京都内で撮影された写真の内、「hotel」タグがつけられている写真を単一写真ウィジェットで表示します。
    </p>
    <hr />
    <h3 class="title_camera">東京都内のホテルの写真</h3>
    <div id="wapiblock"></div>
</body>
</html>

設置サンプル: Panoramio Javascript API - 言語指定（フランス語）サンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=fr'></script>
    <script type="text/javascript">
        $(function(){
            /* リクエスト */
            var myRequest = {
                /* タグ指定 */
                "tag": "hotel",
                /* エリア指定：東京都の境界((35.528873, 139.51057400000002), (35.817813, 139.91020200000003)) */
                "rect": {'sw': {'lat': 35.528873, 'lng': 139.51057400000002}, 'ne': {'lat': 35.817813, 'lng': 139.91020200000003}}
            };
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":320,
                "height":320,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* 単一写真ウィジェット */
            var wapiblock = document.getElementById('wapiblock');
            var widget = new panoramio.PhotoWidget(wapiblock, myRequest, myOptions);
            console.log(widget);
            widget.setPosition(0);
        });
    </script>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        Panoramiaの写真で東京都内で撮影された写真の内、「hotel」タグがつけられている写真を単一写真ウィジェットで表示します。
    </p>
    <hr />
    <h3 class="title_camera">東京都内のホテルの写真</h3>
    <div id="wapiblock"></div>
</body>
</html>

例：指定した写真セットを表示
set+rect併用、セット切替

2012/5/17

取得する写真セットを切り替え表示するサンプルです。
エリアは、フランス国内を指定しています。

var myRequest = {
  "set":panoramio.PhotoSet.ALL,
  "rect":{'sw':{'lat':42.1331639,'lng':-5.982052000000067},'ne':{'lat':50.0380022,'lng':10.409549999999967}}
};

▼setオプションに指定可能な値
「panoramio.PhotoSet.ALL」（すべての写真）
「panoramio.PhotoSet.PUBLIC」（Google Earth用に選択されたすべての写真）
「panoramio.PhotoSet.RECENT」（最近アップロードされた写真）

設置サンプル: Panoramio Javascript API - set+rectサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":340,
                "height":220,
                 "columns": 5,
                 "rows":3,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* リクエスト */
            var myRequest = {
                /* エリア指定：フランスの境界((42.1331639, -5.982052000000067), (50.0380022, 10.409549999999967)) */
                "rect": {'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}}
            };
            function review(flag){
                switch(flag){
                    case "ALL":
                        myRequest["set"]=panoramio.PhotoSet.ALL;
                        break;
                    case "PUBLIC":
                        myRequest["set"]=panoramio.PhotoSet.PUBLIC;
                        break;
                    case "RECENT":
                        myRequest["set"]=panoramio.PhotoSet.RECENT;
                        break;
                }
                /* 写真リストウィジェット */
                var wapiblock = document.getElementById('wapiblock');
                var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
                widget.setPosition(0);
            }
            review($("input[name='set']:checked").val());
            $("input[name='set']").change(function(){
                review($("input[name='set']:checked").val());
            });
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        Panoramiaの写真でフランス国内で撮影された写真の内、下記の条件で写真を表示します。
    </p>
    <hr />
    <form>
        <p>
            set: panoramio.PhotoSet.
            <label for="set_1"><input type="radio" id="set_1" name="set" value="ALL" checked />ALL</label>
            <label for="set_2"><input type="radio" id="set_2" name="set" value="PUBLIC" />PUBLIC</label>
            <label for="set_3"><input type="radio" id="set_3" name="set" value="RECENT" />RECENT</label>
        </p>
    </form>
    <div id="wapiblock"></div>
</body>
</html>

例：指定したタグが付いている写真セットを表示
tag+rect併用、タグ切替

2012/5/17

カンマ区切りで複数の単語を指定し、それらの単語が両方含まれる写真セットを表示するサンプル。
エリアは、フランス国内を指定しています。

var myRequest = {
  "tag":"france,bourgogne",
  "rect":{'sw':{'lat':42.1331639,'lng':-5.982052000000067},'ne':{'lat':50.0380022,'lng':10.409549999999967}}
};

設置サンプル: Panoramio Javascript API - tag+rectサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":340,
                "height":220,
                 "columns": 5,
                 "rows":3,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* リクエスト */
            var myRequest = {
                /* エリア指定：フランスの境界((42.1331639, -5.982052000000067), (50.0380022, 10.409549999999967)) */
                "rect": {'sw': {'lat': 42.1331639, 'lng': -5.982052000000067}, 'ne': {'lat': 50.0380022, 'lng': 10.409549999999967}}
            };
            function review(flag){
                myRequest["tag"]="france,"+flag;
                /* 写真リストウィジェット */
                var wapiblock = document.getElementById('wapiblock');
                var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
                widget.setPosition(0);
            }
            review($("input[name='tag']:checked").val());
            $("input[name='tag']").change(function(){
                review($("input[name='tag']:checked").val());
            });
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        Panoramiaの写真でフランス内で撮影された写真の内、下記のタグが含まれる写真を表示します。
    </p>
    <hr />
    <form>
        <p>
            tag: 
            <label for="tag_1"><input type="radio" id="tag_1" name="tag" value="bourgogne" checked />france, bourgogne</label>
            <label for="tag_2"><input type="radio" id="tag_2" name="tag" value="bretagne" />france, bretagne</label>
            <label for="tag_3"><input type="radio" id="tag_3" name="tag" value="paris" />france, paris</label>
        </p>
    </form>
    <div id="wapiblock"></div>
</body>
</html>

例：指定したユーザーが撮影した写真セットを新しい順に表示
user+order併用、順序切替

2012/5/17

指定したユーザーの写真セットを表示し、写真の投稿日付の昇順・降順に切替表示するサンプル。

var myRequest = {
  "user":788837,
  "order":panoramio.PhotoOrder.DATE_DESC
};

▼orderオプションに指定可能な値
「panoramio.PhotoOrder.DATE_DESC」（新→古しい写真の順）
「panoramio.PhotoOrder.DATE」（古→新しい写真の順、デフォルト）

設置サンプル: Panoramio Javascript API - user+orderサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":330,
                "height":220,
                 "columns": 3,
                 "rows":2,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* リクエスト */
            var myRequest = {
                "user":6901390
            };
            function review(flag){
                switch(flag){
                    case "DATE_DESC":
                        myRequest["order"]=panoramio.PhotoOrder.DATE_DESC;
                        break;
                    case "DATE":
                        myRequest["order"]=panoramio.PhotoOrder.DATE;
                        break;
                }
                /* 写真リストウィジェット */
                var wapiblock = document.getElementById('wapiblock');
                var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
                widget.setPosition(0);
            }
            review($("input[name='order']:checked").val());
            $("input[name='order']").change(function(){
                review($("input[name='order']:checked").val());
            });
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        指定したユーザーの写真セットを表示し、写真の投稿日付の昇順・降順に切り替え表示します。
    </p>
    <hr />
    <h3 class="title_camera"><a href="http://www.panoramio.com/user/6901390" target="_blank">cocoism</a> の写真</h3>
    <form>
        <p>
            order: 
            <label for="order_1"><input type="radio" id="order_1" name="order" value="DATE" checked />DATE（古→新）</label>
            <label for="order_2"><input type="radio" id="order_2" name="order" value="DATE_DESC" />DATE_DESC（新→古）</label>
        </p>
    </form>
    <div id="wapiblock"></div>
</body>
</html>

例：指定したエリア内で特定のタグが付いている写真セットを表示
tag+rect併用、エリア切替

2012/5/17

各首都で撮影された写真の中から「hotel」のタグがつけられている写真を表示するサンプル。

var myRequest = {
  "tag":"hotel",
  "rect":{'sw':{'lat':48.7978487,'lng':2.224162500000034},'ne':{'lat':48.9153104,'lng':2.4802813000000015}},
};

設置サンプル: Panoramio Javascript API - tag+rectサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            var rect_ary={
                "paris": {'sw': {'lat': 48.7978487, 'lng': 2.224162500000034}, 'ne': {'lat': 48.9153104, 'lng': 2.4802813000000015}},
                "roma": {'sw': {'lat': 41.65587379999999, 'lng': 12.234426600000006}, 'ne': {'lat': 42.140959, 'lng': 12.855864099999962}},
                "madrid": {'sw': {'lat': 41.65587379999999, 'lng': 12.234426600000006}, 'ne': {'lat': 42.140959, 'lng': 12.855864099999962}}
            }
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":340,
                "height":220,
                 "columns": 5,
                 "rows":3,
                "croppedPhotos":true /* 写真のトリミング表示有効 */
            }
            /* リクエスト */
            var myRequest = {
                "tag":"hotel"
            };
            function review(flag){
                myRequest["rect"]=rect_ary[flag];
                /* 写真リストウィジェット */
                var wapiblock = document.getElementById('wapiblock');
                var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
                widget.setPosition(0);
            }
            review($("input[name='rect']:checked").val());
            $("input[name='rect']").change(function(){
                review($("input[name='rect']:checked").val());
            });
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        各首都で撮影された写真の中から「hotel」のタグがつけられている写真を表示します。
    </p>
    <hr />
    <form>
        <p>
            rect: 
            <label for="rect_1"><input type="radio" id="rect_1" name="rect" value="paris" checked />フランス　パリ</label>
            <label for="rect_2"><input type="radio" id="rect_2" name="rect" value="roma" />イタリア　ローマ</label>
            <label for="rect_3"><input type="radio" id="rect_3" name="rect" value="madrid" />スペイン　マドリード</label>
        </p>
    </form>
    <div id="wapiblock"></div>
</body>
</html>

例：指定した写真グループの写真セットを新しい順に表示
group+order併用、グループ切替

2012/5/17

指定したPanoramioの写真グループにある写真を新しい順に表示するサンプル。

var myRequest = {
  "group":6095,
  "rect":{'sw':{'lat':48.7978487,'lng':2.224162500000034},'ne':{'lat':48.9153104,'lng':2.4802813000000015}},
};

設置サンプル: Panoramio Javascript API - group+orderサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":340,
                "height":220,
                 "columns": 5,
                 "rows":3,
                "croppedPhotos":panoramio.Cropping.TO_FILL /* 写真のトリミング */
            }
            /* リクエスト */
            var myRequest = {
                "order":panoramio.PhotoOrder.DATE_DESC    /* 新→古い写真順 */
            };
            function review(flag){
                myRequest["group"]=flag;
                /* 写真リストウィジェット */
                var wapiblock = document.getElementById('wapiblock');
                var widget = new panoramio.PhotoListWidget(wapiblock, myRequest, myOptions);
                widget.setPosition(0);
            }
            review($("input[name='grp']:checked").val());
            $("input[name='grp']").change(function(){
                review($("input[name='grp']:checked").val());
            });
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>
        選択したPanoramioの写真グループにある写真を新しい順に表示します。
    </p>
    <hr />
    <form>
        <p>
            group: 
            <label for="grp_1"><input type="radio" id="grp_1" name="grp" value="6095" checked />Panoramas</label>
            <label for="grp_2"><input type="radio" id="grp_2" name="grp" value="8334" />colors of life</label>
            <label for="grp_3"><input type="radio" id="grp_3" name="grp" value="8186" />Nature Is Beautiful</label>
        </p>
    </form>
    <div id="wapiblock"></div>
</body>
</html>

例：指定したユーザーの任意の写真を1枚表示
ids使用

2012/5/17

指定した写真ID＋ユーザーIDの写真を1枚だけ表示するサンプル。
「cocoism」さんが撮影した「TOKYO SKYTREE」の写真を表示しています。

なおcroppedPhotosには「panoramio.Cropping.TO_FILL」を指定し、画像を領域いっぱいに表示してトリミングしています。トリミングされる形はウィジェットのサイズに依存します。

写真は1枚しか表示しないので、ウィジェットの前後矢印は非表示にしてあります。

設置サンプル: Panoramio Javascript API - idsサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>指定したユーザーの任意の写真を1枚表示 | Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":360,
                "height":360,
                 "columns": 6,
                 "rows":2,
                "croppedPhotos":panoramio.Cropping.TO_FILL
            }
            /* リクエスト */
            var myRequest = {
                "ids":[
                    {'photoId': 74254755, 'userId': 6901390}
                ]
            };
            /* 写真リストウィジェット */
            var widget = new panoramio.PhotoWidget('wapiblock', myRequest, myOptions);
            widget.setPosition(0);
            widget.enablePreviousArrow(false);    /* 前へ矢印非表示 */
            widget.enableNextArrow(false);        /* 次へ矢印非表示 */
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>指定したユーザーの任意の写真を1枚表示するサンプル。ここでは「cocoism」さんが撮影した「TOKYO SKYTREE」の写真を表示しています。</p>
    <hr />
    <h3 class="title_camera">TOKYO SKYTREE</h3>
    <div id="wapiblock"></div>
</body>
</html>

例：任意の写真セットを表示
ids使用

2012/5/17

指定した写真ID＋ユーザーIDの写真セットを表示するサンプル。
写真の順番は、写真セットに指定した順になります。orederオプションでの並び替えはできません。

以下では、Panoramioの写真の中から「パリの凱旋門」の写真を集めて表示してみました。

設置サンプル: Panoramio Javascript API - idsサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目 */
            var myOptions = {
                "width":360,
                "height":220,
                 "columns": 6,
                 "rows":2,
                "croppedPhotos":panoramio.Cropping.TO_FILL
            }
            /* リクエスト */
            var myRequest = {
                "ids":[
                    {'photoId': 16365869,    'userId': 1662714},
                    {'photoId': 30149354,    'userId': 3968724},
                    {'photoId': 59723765,    'userId': 341731},
                    {'photoId': 61955771,    'userId': 1850516},
                    {'photoId': 29049775,    'userId': 2341793},
                    {'photoId': 60984787,    'userId': 4272273},
                    {'photoId': 53880245,    'userId': 4208745},
                    {'photoId': 547292,        'userId': 116341},
                    {'photoId': 2330395,    'userId': 101009},
                    {'photoId': 43182870,    'userId': 2972027},
                    {'photoId': 20789715,    'userId': 873463},
                    {'photoId': 1558077,    'userId': 78506},
                    {'photoId': 6495866,    'userId': 1081020},
                    {'photoId': 4743304,    'userId': 799809},
                    {'photoId': 7812842,    'userId': 151365},
                    {'photoId': 57679492,    'userId': 3452687},
                    {'photoId': 60984787,    'userId': 4272273},
                    {'photoId': 1558077,    'userId': 78506}
                ]
            };
            /* 写真リストウィジェット */
            var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
            widget.setPosition(0);
        });
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist {    /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images {    /* 背景色 */
            background-color: #d2e6f4
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <p>任意に指定した写真セットを表示するサンプル。ここではパリの凱旋門の写真を集めてみました。</p>
    <hr />
    <h3 class="title_camera">パリの凱旋門の写真</h3>
    <div id="wapiblock"></div>
</body>
</html>

例：クリックした写真情報を取得し、撮影場所をストリートビュー表示
Googleマップ連動

2012/5/17

設置サンプル: Panoramio Javascript API - photo Objectサンプルを見る

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Panoramio JavaScript API | 設置サンプル</title>
    <link rel="stylesheet" href="/content/lib/global.css" type="text/css" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <!-- PanoramioのJavaScript APIを読み込む -->
    <script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
    <!-- Google Maps APIの読み込み -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript">
        $(function(){
            /* ウィジェットの見た目を指定 */
            var myOptions = {
                "width":320,                /* ウィジェットの幅(px) */
                "height":220,                /* ウィジェットの高さ(px) */
                "croppedPhotos":true,        /* 写真トリミング有効 */
                "columns":4,
                "rows":3,
                "disableDefaultEvents":[    /* 一部のデフォルトイベント無効化 */
                    panoramio.events.EventType.PHOTO_CLICKED
                ]
            }
            /* リクエストを指定 */
            var myRequest = {
                "rect": {'sw': {'lat': 35.657386, 'lng': 139.70300099999997}, 'ne': {'lat': 35.67244, 'lng': 139.72109899999998}}
            };
            /* 写真リストウィジェットを生成 */
            var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
            /* ウィジェットを表示 */
            /* 写真の表示開始位置を指定 */
            widget.setPosition(0);
            
            /* 写真がクリックされた時 */
            function photoClicked(event) {
                /* クリックされた写真情報を表示 */
                var s="";
                s+="写真ID："+event.getPhoto().getPhotoUrl()+"\n";
                s+="写真タイトル："+event.getPhoto().getPhotoTitle()+"\n";
                s+="写真ページのURL："+event.getPhoto().getPhotoUrl()+"\n";
                s+="撮影された場所："+event.getPhoto().getPosition()["lat"]+", "+event.getPhoto().getPosition()["lng"]+"\n";
                s+="撮影者のユーザーID："+event.getPhoto().getOwnerId()+"\n";
                s+="撮影者の名前："+event.getPhoto().getOwnerName()+"\n";
                s+="オリジナル写真の幅："+event.getPhoto().getWidth()+"px\n";
                s+="オリジナル写真の高さ："+event.getPhoto().getWidth()+"px\n";
                lat=event.getPhoto().getPosition()["lat"];
                lng=event.getPhoto().getPosition()["lng"];
                initialize();
                $("#res").val(s);
            }
            panoramio.events.listen(widget, panoramio.events.EventType.PHOTO_CLICKED,  photoClicked);
        });
        /* クリックした写真の位置のストリートビューを表示 */
        var map,svp,lat=35.6652470,lng=139.7123140; /* デフォルトは表参道の緯度・経度 */
        function initialize() {
            var latlng=new google.maps.LatLng(lat,lng);
            var obj=document.getElementById("mapcanvas");
            var myOptions = {
                zoom: 18,
                center:latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
               map=new google.maps.Map(obj, myOptions);
            svp=new google.maps.StreetViewPanorama(
                obj,{
                    position:map.getCenter()
                });
            map.setStreetView(svp);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
    <style type="text/css">
        #wapiblock .panoramio-wapi-photolist { /* 枠 */
            border:1px solid #aec8e8;
        }
        #wapiblock .panoramio-wapi-images { /* 背景色 */
            background-color: #d2e6f4
        }
        #wapiblock {
            width:320px;
            float:left;
        }
        #mapcanvas {
            width:270px; height:202px;
            background:#eee;
            border:1px solid #ccc;
            float:right;
        }
        textarea {
            width:600px; height:120px;
            font-size:6px;
            margin:0; padding:0;
            line-height:1.2;
        }
    </style>
</head>
<body>
    <h1>設置サンプル：Panoramio JavaScript API</h1>
    <h2>写真オブジェクト</h2>
    <p>
        クリックした写真の情報を表示し、撮影された場所のストリートビューを表示します。<br>
        ※写真のクリックイベントはログ出力のため仮で無効にしてあります。
    </p>
    <hr />
    <h3 class="title_camera">表参道駅周辺の写真</h3>
    <div class="cf" style="width:600px;">
        <div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
        <div id="mapcanvas"><!-- Googleマップ表示領域 --></div>
    </div>
    <textarea id="res"></textarea>
</body>
</html>

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

Webサービス連動 flickr関連

PHP & JavaScript Room

PanoramioPanoramio Widget API：JavaScript API

JavaScriptライブラリでPanoramioウィジェットをカスタマイズ

組み込み手順

リクエスト
指定した条件の写真セットを取得

リクエストオブジェクトの値

単一写真ウィジェット

PhotoWidgetのオプション

PhotoWidgetのメソッド

設置サンプル

写真リストウィジェット

PhotoListWidgetのオプション

PhotoListWidgetのメソッド

設置サンプル

イベント
デフォルトイベントの動作を制御

構文

イベントタイプ

設置サンプル - デフォルトイベントを有効・無効化

設置サンプル - 一部のデフォルトイベントを無効化

写真オブジェクト
現在表示されている写真情報を取得

Photoオブジェクトのメソッド

設置サンプル - 現在表示している写真情報を取得

設置サンプル - クリックした写真情報を取得

属性ブロック
著作権表示の表示スタイルを指定

設置サンプル - attributionStyle

設置サンプル - TermsOfServiceWidget

例：ウィジェット内のテキスト表示などの言語を明示
hlパラメータ

例：指定した写真セットを表示
set+rect併用、セット切替

例：指定したタグが付いている写真セットを表示
tag+rect併用、タグ切替

例：指定したユーザーが撮影した写真セットを新しい順に表示
user+order併用、順序切替

例：指定したエリア内で特定のタグが付いている写真セットを表示
tag+rect併用、エリア切替

例：指定した写真グループの写真セットを新しい順に表示
group+order併用、グループ切替

例：指定したユーザーの任意の写真を1枚表示
ids使用

例：任意の写真セットを表示
ids使用

例：クリックした写真情報を取得し、撮影場所をストリートビュー表示
Googleマップ連動

関連コンテンツ

PanoramioPanoramio Widget API：JavaScript API

JavaScriptライブラリでPanoramioウィジェットをカスタマイズ

組み込み手順

リクエスト指定した条件の写真セットを取得

リクエストオブジェクトの値

単一写真ウィジェット

PhotoWidgetのオプション

PhotoWidgetのメソッド

設置サンプル

写真リストウィジェット

PhotoListWidgetのオプション

PhotoListWidgetのメソッド

設置サンプル

イベントデフォルトイベントの動作を制御

構文

イベントタイプ

設置サンプル - デフォルトイベントを有効・無効化

設置サンプル - 一部のデフォルトイベントを無効化

写真オブジェクト現在表示されている写真情報を取得

Photoオブジェクトのメソッド

設置サンプル - 現在表示している写真情報を取得

設置サンプル - クリックした写真情報を取得

属性ブロック著作権表示の表示スタイルを指定

設置サンプル - attributionStyle

設置サンプル - TermsOfServiceWidget

例：ウィジェット内のテキスト表示などの言語を明示hlパラメータ

例：指定した写真セットを表示set+rect併用、セット切替

例：指定したタグが付いている写真セットを表示tag+rect併用、タグ切替

例：指定したユーザーが撮影した写真セットを新しい順に表示user+order併用、順序切替

例：指定したエリア内で特定のタグが付いている写真セットを表示tag+rect併用、エリア切替

例：指定した写真グループの写真セットを新しい順に表示group+order併用、グループ切替

例：指定したユーザーの任意の写真を1枚表示ids使用

例：任意の写真セットを表示ids使用

例：クリックした写真情報を取得し、撮影場所をストリートビュー表示Googleマップ連動

関連コンテンツ

リクエスト
指定した条件の写真セットを取得

イベント
デフォルトイベントの動作を制御

写真オブジェクト
現在表示されている写真情報を取得

属性ブロック
著作権表示の表示スタイルを指定

例：ウィジェット内のテキスト表示などの言語を明示
hlパラメータ

例：指定した写真セットを表示
set+rect併用、セット切替

例：指定したタグが付いている写真セットを表示
tag+rect併用、タグ切替

例：指定したユーザーが撮影した写真セットを新しい順に表示
user+order併用、順序切替

例：指定したエリア内で特定のタグが付いている写真セットを表示
tag+rect併用、エリア切替

例：指定した写真グループの写真セットを新しい順に表示
group+order併用、グループ切替

例：指定したユーザーの任意の写真を1枚表示
ids使用

例：任意の写真セットを表示
ids使用

例：クリックした写真情報を取得し、撮影場所をストリートビュー表示
Googleマップ連動