PHP & JavaScript Room :: 設置サンプル

実行結果

設置サンプル - GMAPv3 - Panoramioレイヤ（デフォルト）

参照：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 &amp; 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>