参照：Google Maps JavaScript API v3 - Panoramioレイヤ（ライブラリ）
ボタンを押すとPanoramioレイヤのON/OFFを切り替えます。
suppressInfoWindowsに"false"を指定して、デフォルトの動きは無効化しています。
写真タイルをクリックすると、情報ウィンドウを独自に生成して、Panoramio写真（mediumサイズ）を表示します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>設置サンプル - GMAPv3 - Panoramioレイヤ（情報ウィンドウ）</title>
<link rel="stylesheet" type="text/css" href="/content/css/gmapv3.css" />
<!-- スマートフォン向けviewportの指定 -->
<!--meta name="viewport" content="initial-scale=1.0, user-scalable=no" /-->
<!-- jQuery -->
<script src="http://maps.google.com/maps/api/js?sensor=true&libraries=panoramio"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/content/lib/gmapv3/infobox.js"></script>
<script type="text/javascript">
$(function(){
var map;
//PanoramioLayer
var panoramioLayerFLG=false;
var photos=[],photosFLG=[];
/* ページ読み込み時に地図を初期化 */
initialize();
function initialize() {
point=new google.maps.LatLng(48.856614,2.352222); /* Paris */
map=new google.maps.Map(document.getElementById('map'), {
center: point,
zoom:15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: false /* スクロールホイールによる拡大・縮小無効化 */
});
/* panoramioレイヤオブジェクトを生成して地図に追加 */
var panoramioLayer=new google.maps.panoramio.PanoramioLayer({
suppressInfoWindows:true /* デフォルトの動作は無効化 */
});
panoramioLayer.setMap(map);
panoramioLayerFLG=true;
/* panoramioレイヤ切り替えボタン */
$("#btn").click(function(){
closeInfoWindowPano();
if(!panoramioLayerFLG){
$(this).addClass("active");
panoramioLayer.setMap(map);
panoramioLayerFLG=true;
}else{
$(this).removeClass("active");
panoramioLayer.setMap(null);
panoramioLayerFLG=false;
}
return false;
});
/* 写真タイルをクリックしたら情報ウィンドウを生成して、Panoramio写真を表示 */
google.maps.event.addListener(panoramioLayer,"click",function(photo){
closeInfoWindowPano();
if(photosFLG[photo.featureDetails.photoId]!=1){
var s="<div class='logo'><a href='http://www.panoramio.com/' target='_blank'><img src='/content/img/ajax/gmapv3/logo-small.gif' alt='Panoramio logo' /></a></div>";
s+="<div class='thumb'><a href='"+photo.featureDetails.url+"' target='_blank'><img src='http://mw2.google.com/mw-panoramio/photos/medium/"+photo.featureDetails.photoId+".jpg' class='size shadow' /></a></div>";
s+="<p class='author'><a href='"+photo.featureDetails.url+"' target='_blank'>"+photo.featureDetails.title+"</a> ";
s+="by <a href='http://www.panoramio.com/user/"+photo.featureDetails.userid+"' target='_blank'>"+photo.featureDetails.author+"</a></p>";
var infowindow=new google.maps.InfoWindow({
content:"<div class='panowin'>"+s+"</div>"
});
infowindow.set("id",photo.featureDetails.photoId);
map.setCenter(new google.maps.LatLng(photo.latLng.jb,photo.latLng.kb)); /* 写真が中央に来るようにする */
google.maps.event.addListener(infowindow,"closeclick",function(){
photosFLG[photo.featureDetails.photoId]=0;
});
infowindow.setPosition(photo.latLng);
infowindow.open(map);
photos[photo.featureDetails.photoId]=infowindow;
photosFLG[photo.featureDetails.photoId]=1;
}else{
photos[photo.featureDetails.photoId].close();
photosFLG[photo.featureDetails.photoId]=0;
}
});
}
/* 写真ウィンドウ削除 */
function closeInfoWindowPano(){
if(photos.length>0){
for(i in photos){
photos[i].close();
}
}
}
function dbg(str){
try{
if(window.console && console.log){
console.log(str);
}
}catch(err){
//alert("error:"+err);
}
}
});
</script>
<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>設置サンプル - GMAPv3 - Panoramioレイヤ（情報ウィンドウ）</h1>
<p>参照：<a href='https://developers.google.com/maps/documentation/javascript/layers?hl=ja#PanoramioLibrary'>Google Maps JavaScript API v3 - Panoramioレイヤ（ライブラリ）</a></p>
<p>
ボタンを押すとPanoramioレイヤのON/OFFを切り替えます。<br>
suppressInfoWindowsに"false"を指定して、デフォルトの動きは無効化しています。<br>
写真タイルをクリックすると、情報ウィンドウを独自に生成して、Panoramio写真（mediumサイズ）を表示します。
</p>
<p><a href="#" class="button active" id="btn">panoramioLayer</a></p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>