クリックした写真の情報を表示し、撮影された場所のストリートビューを表示します。
※写真のクリックイベントはログ出力のため仮で無効にしてあります。
<!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>
<!-- PanoramioのJavaScript APIを読み込む -->
<script type='text/javascript' src='http://www.panoramio.com/wapi/wapi.js?v=1&hl=ja'></script>
<!-- Google Maps APIの読み込み -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">
$(function(){
/* ウィジェットの見た目を指定 */
var myOptions = {
"width":320, /* ウィジェットの幅(px) */
"height":220, /* ウィジェットの高さ(px) */
"croppedPhotos":true, /* 写真トリミング有効 */
"columns":4,
"rows":3,
"disableDefaultEvents":[ /* 一部のデフォルトイベント無効化 */
panoramio.events.EventType.PHOTO_CLICKED
]
}
/* リクエストを指定 */
var myRequest = {
"rect": {'sw': {'lat': 35.657386, 'lng': 139.70300099999997}, 'ne': {'lat': 35.67244, 'lng': 139.72109899999998}}
};
/* 写真リストウィジェットを生成 */
var widget = new panoramio.PhotoListWidget('wapiblock', myRequest, myOptions);
/* ウィジェットを表示 */
/* 写真の表示開始位置を指定 */
widget.setPosition(0);
/* 写真がクリックされた時 */
function photoClicked(event) {
/* クリックされた写真情報を表示 */
var s="";
s+="写真ID："+event.getPhoto().getPhotoUrl()+"\n";
s+="写真タイトル："+event.getPhoto().getPhotoTitle()+"\n";
s+="写真ページのURL："+event.getPhoto().getPhotoUrl()+"\n";
s+="撮影された場所："+event.getPhoto().getPosition()["lat"]+", "+event.getPhoto().getPosition()["lng"]+"\n";
s+="撮影者のユーザーID："+event.getPhoto().getOwnerId()+"\n";
s+="撮影者の名前："+event.getPhoto().getOwnerName()+"\n";
s+="オリジナル写真の幅："+event.getPhoto().getWidth()+"px\n";
s+="オリジナル写真の高さ："+event.getPhoto().getWidth()+"px\n";
lat=event.getPhoto().getPosition()["lat"];
lng=event.getPhoto().getPosition()["lng"];
initialize();
$("#res").val(s);
}
panoramio.events.listen(widget, panoramio.events.EventType.PHOTO_CLICKED, photoClicked);
});
/* クリックした写真の位置のストリートビューを表示 */
var map,svp,lat=35.6652470,lng=139.7123140; /* デフォルトは表参道の緯度・経度 */
function initialize() {
var latlng=new google.maps.LatLng(lat,lng);
var obj=document.getElementById("mapcanvas");
var myOptions = {
zoom: 18,
center:latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map=new google.maps.Map(obj, myOptions);
svp=new google.maps.StreetViewPanorama(
obj,{
position:map.getCenter()
});
map.setStreetView(svp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<style type="text/css">
#wapiblock .panoramio-wapi-photolist { /* 枠 */
border:1px solid #aec8e8;
}
#wapiblock .panoramio-wapi-images { /* 背景色 */
background-color: #d2e6f4
}
#wapiblock {
width:320px;
float:left;
}
#mapcanvas {
width:270px; height:202px;
background:#eee;
border:1px solid #ccc;
float:right;
}
textarea {
width:600px; height:120px;
font-size:6px;
margin:0; padding:0;
line-height:1.2;
}
</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>設置サンプル：Panoramio JavaScript API</h1>
<h2>写真オブジェクト</h2>
<p>
クリックした写真の情報を表示し、撮影された場所のストリートビューを表示します。<br>
※写真のクリックイベントはログ出力のため仮で無効にしてあります。
</p>
<hr />
<h3 class="title_camera">表参道駅周辺の写真</h3>
<div class="cf" style="width:600px;">
<div id="wapiblock"><!-- ウィジェットの表示領域 --></div>
<div id="mapcanvas"><!-- Googleマップ表示領域 --></div>
</div>
<textarea id="res"></textarea>
</body>
</html>