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=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> <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>