PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル

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: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>
<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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <h1>設置サンプル</h1>
   <div id="box">
      <div id="pano"></div>
      <div id="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</div>
   </div>
</body>
</html>