参照: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>