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

実行結果

設置サンプル - GMAPv3 - Panoramioレイヤ - カスタム情報ウィンドウ(InfoBox使用)

参照:Google Maps JavaScript API v3 - Panoramioレイヤ(ライブラリ)InfoBox: google-maps-utility-library-v3

ボタンを押すとPanoramioレイヤのON/OFFを切り替えます。
suppressInfoWindowsに"false"を指定して、デフォルトの動きは無効化しています。
写真タイルをクリックすると、カスタム情報ウィンドウを生成して、Panoramio写真(mediumサイズ)を表示します。

panoramioLayer

設置サンプルのソース

<!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;
         var   customOpacity=1;
         var closeBoxURL="/content/img/ajax/gmapv3/close.gif"
         var tipBoxURL="/content/img/ajax/gmapv3/tipbox.gif";
         var maxWidth=600;
         //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 /* スクロールホイールによる拡大・縮小無効化 */
            });
            // panoramioLayerオブジェクトを生成して地図に追加
            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;
            });
            google.maps.event.addListener(panoramioLayer,"click",function(photo){
               closeInfoWindowPano();
               dbg(photo);
               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' /></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 myOptions={
                      content:"<div class='customwin'>"+s+"</div>",
                     disableAutoPan:false,
                     maxWidth:0,
                     pixelOffset:new google.maps.Size(-(maxWidth/2),0),
                     zIndex:1,
                     boxStyle:{ 
                        background:"url('"+tipBoxURL+"') no-repeat center 26px",
                        opacity:customOpacity,
                        width:maxWidth+"px"
                     },
                     closeBoxMargin:"38px 6px 0 0",
                     closeBoxURL:closeBoxURL,
                     infoBoxClearance:new google.maps.Size(1,1),
                     isHidden:false,
                     pane:"floatPane",
                     enableEventPropagation:false
                  };
                  var infowindow=new InfoBox(myOptions);
                  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 &amp; JavaScript Room</a> :: 設置サンプル</h1>
<h3 class='h'>実行結果</h3>
   <h1>設置サンプル - GMAPv3 - Panoramioレイヤ - カスタム情報ウィンドウ(InfoBox使用)</h1>
   <p>参照:<a href='https://developers.google.com/maps/documentation/javascript/layers?hl=ja#PanoramioLibrary'>Google Maps JavaScript API v3 - Panoramioレイヤ(ライブラリ)</a>、<a href='http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/'>InfoBox: google-maps-utility-library-v3</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>