実行結果
設置サンプル
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 & 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>