Panoramiaの写真で東京都内で撮影された写真の内、「hotel」タグがつけられている写真を単一写真ウィジェットで表示します。
<!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>
<link rel="stylesheet" type="text/css" href="/common/css/example.css"></head>
<body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
<h1>設置サンプル：Panoramio JavaScript API</h1>
<p>
Panoramiaの写真で東京都内で撮影された写真の内、「hotel」タグがつけられている写真を単一写真ウィジェットで表示します。
</p>
<hr />
<h3 class="title_camera">東京都内のホテルの写真</h3>
<div id="wapiblock"></div>
</body>
</html>