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:0,
to:28,
minx:139.70300099999997,
miny:35.657386,
maxx:139.72109899999998,
maxy:35.67244,
size:"square",
mapfilter:true,
ts:new Date().getTime()
}
var s="";
$.getJSON(url,data,function(json){
for(var i in json.photos){
s+="<a href='http://www.panoramio.com/photo/"+json.photos[i].photo_id+"' target='_blank'><img src='"+json.photos[i].photo_file_url+"' /></a>";
}
$("#pano").html(s);
});
});
</script>
<style type="text/css">
* {
margin:0; padding:0;
font-size:12px;
}
body {
line-height:1.2;
margin:20px;
}
#box {
width:498px;
background:#333;
margin:20px;
color:#fff;
}
#box h2 {
margin:0; padding:5px 10px;
font-size:13px;
}
#box p.license {
margin:0; padding:5px 10px;
font-size:11px;
text-align:right;
}
#pano {
margin:0; padding:0 0 0 4px;
overflow:hidden;
clear:both;
float:none;
}
#pano a {
border:1px solid #fff;
margin:0 4px 4px 4px; padding:0;
display:block;
width:60px; height:60px;
float:left;
}
</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">
<h2>表参道周辺の写真</h2>
<div id="pano"></div>
<p class="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</p>
</div>
</body>
</html>