地図上マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。
Panoramio提供の写真の著作権はそのオーナーに帰属します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Panoramio API | 設置サンプル</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
var map,tmp=[];
/*
場所の境界は以下のページで住所空検索できます。
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 lat=35.665247;
var lng=39.712314;
/* 境界 */
var sw_lat=35.657386;
var sw_lng=139.70300099999997;
var ne_lat=35.67244;
var ne_lng=139.72109899999998;
var sw=new google.maps.LatLng(sw_lat,sw_lng);
var ne=new google.maps.LatLng(ne_lat,ne_lng);
var bounds=new google.maps.LatLngBounds(sw,ne);
$(function(){
/* 地図初期化 */
var myLatlng=new google.maps.LatLng(35.665247,139.712314);
var myOptions={
zoom:15,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
draggable:true
};
function initialize(){
/* 地図オブジェクト */
map=new google.maps.Map(document.getElementById("map"), myOptions);
map.fitBounds(bounds);
/* 地図をクリックしたときに情報ウィンドウを閉じる */
google.maps.event.addListener(map, 'click', function() {
clear();
});
}
initialize();
/* Panoramio API */
var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
var data={
order:"popularity",
set:"public",
from:0,
to:24,
minx:sw_lng,
miny:sw_lat,
maxx:ne_lng,
maxy:ne_lat,
size:"small",
mapfilter:true,
ts:new Date().getTime()
}
/* jQueryのgetJSONで写真セットのJSONデータを取得 */
$.getJSON(url,data,function(json){
for(var i in json.photos){
showMarker(i,json.photos[i]);
}
});
function showMarker(i,pdata){
/* 各写真の位置にマーカーを立てる */
var myLatlng=new google.maps.LatLng(pdata.latitude,pdata.longitude);
/* マーカーアイコン（http://mapicons.nicolasmollet.com/） */
var image = '/content/demo/geolocation/camera.png';
var marker=new google.maps.Marker({
position: myLatlng,
map: map,
icon: image,
title:pdata.photo_title
});
/* 情報ウィンドウにPanoramioの写真表示 */
var contentString='<div id="infowin">'+
'<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></\div>'+
'<p><a target="_blank" class="photo_title" href="'+pdata.photo_url+'"><strong>'+pdata.photo_title+'<\/strong><\/a><br>'+
'by <a target="_blank" href="'+pdata.owner_url+'">'+pdata.owner_name+'<\/a><\/p><\/div>';
/* マーカーがクリックされた時に情報ウィンドウ表示 */
google.maps.event.addListener(marker, 'click', function() {
clear(); /* いったんすべての情報ウィンドウを閉じる */
var infowindow=new google.maps.InfoWindow({
content: contentString
});
infowindow.open(map, marker);
tmp[i]=infowindow; /* 情報ウィンドウオブジェクト格納 */
});
}
/* 情報ウィンドウをすべて閉じる */
function clear(){
for(var i in tmp){
if(tmp[i]){
tmp[i].close();
}
}
}
});
</script>
<style>
* {
margin:0; padding:0;
font-size:12px;
}
body {
line-height:1.2;
margin:20px;
}
#box {
margin:0 0 20px 0; padding:0;
width:498px;
}
#box h2 {
margin:0; padding:0;
font-size:13px;
}
#box p.license {
font-size:11px;
text-align:center;
}
#infowin {
margin:0; padding:0;
font-size:12px;
line-height:1.2;
}
#infowin div.inner {
text-align:center;
}
#infowin p {
margin:0; padding:0;
overflow:hidden;
}
#map {
width:498px; height:498px;
margin:0 0 5px 0; padding:0;
}
</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>
<div id="box">
<h2>表参道周辺の写真</h2>
<p>地図上マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。</p>
<div id="map"></div>
<p class="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</p>
</div>
</body>
</html>
