参照:Google Maps JavaScript API v3 - Panoramioレイヤ(ライブラリ)
ボタンを押すとPanoramioレイヤのON/OFFを切り替えます。
<!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:false
});
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;
});
}
/* 写真ウィンドウ削除 */
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を切り替えます。</p>
<p><a href="#" class="button active" id="btn">panoramioLayer</a></p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>