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

実行結果

表参道周辺の写真

地図上マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。

Panoramio提供の写真の著作権はそのオーナーに帰属します。

設置サンプルのソース

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>Panoramio API | 設置サンプル</title>
   <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
   <script type="text/javascript">
      var map,tmp=[];
      /* 
         場所の境界は以下のページで住所空検索できます。
         http://phpjavascriptroom.com/example7.php?f=include/ajax/gmapv3/geocoding/geocoding.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB#
      */
      /* 表参道 */
      var lat=35.665247;
      var lng=39.712314;
      /* 境界 */
      var sw_lat=35.657386;
      var sw_lng=139.70300099999997;
      var ne_lat=35.67244;
      var ne_lng=139.72109899999998;
      var sw=new google.maps.LatLng(sw_lat,sw_lng);
      var ne=new google.maps.LatLng(ne_lat,ne_lng);
      var bounds=new google.maps.LatLngBounds(sw,ne);
      
      $(function(){
         /* 地図初期化 */
         var myLatlng=new google.maps.LatLng(35.665247,139.712314);
         var myOptions={
            zoom:15,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            draggable:true
         };
         function initialize(){
            /* 地図オブジェクト */
            map=new google.maps.Map(document.getElementById("map"), myOptions);
            map.fitBounds(bounds);
            /* 地図をクリックしたときに情報ウィンドウを閉じる */
            google.maps.event.addListener(map, 'click', function() {
               clear();
            });
         }
         initialize();
         /* Panoramio API */
         var url="http://www.panoramio.com/map/get_panoramas.php?callback=?";
         var data={
            order:"popularity",
            set:"public",
            from:0,
            to:24,
            minx:sw_lng,
            miny:sw_lat,
            maxx:ne_lng,
            maxy:ne_lat,
            size:"small",
            mapfilter:true,
            ts:new Date().getTime()
         }
         /* jQueryのgetJSONで写真セットのJSONデータを取得 */
         $.getJSON(url,data,function(json){
            for(var i in json.photos){
               showMarker(i,json.photos[i]);
            }
         });
         function showMarker(i,pdata){
            /* 各写真の位置にマーカーを立てる */
            var myLatlng=new google.maps.LatLng(pdata.latitude,pdata.longitude);
            /* マーカーアイコン(http://mapicons.nicolasmollet.com/) */
               var image = '/content/demo/geolocation/camera.png';
            var marker=new google.maps.Marker({
                position: myLatlng,
                map: map,
                   icon: image,
                title:pdata.photo_title
            });
            /* 情報ウィンドウにPanoramioの写真表示 */
            var contentString='<div id="infowin">'+
'<div class="inner"><a href="http://www.panoramio.com/" target="_blank"><img src="/content/demo/geolocation/logo-small.gif" width="119" height="25" alt="Panoramio logo" /><\/a><br>'+
'<a href="'+pdata.photo_url+'" target="_blank"><img width="'+pdata.width+'" height="'+pdata.height+'" src="'+pdata.photo_file_url+'"/><\/a></\div>'+
'<p><a target="_blank" class="photo_title" href="'+pdata.photo_url+'"><strong>'+pdata.photo_title+'<\/strong><\/a><br>'+
'by <a target="_blank" href="'+pdata.owner_url+'">'+pdata.owner_name+'<\/a><\/p><\/div>';
            /* マーカーがクリックされた時に情報ウィンドウ表示 */
            google.maps.event.addListener(marker, 'click', function() {
               clear(); /* いったんすべての情報ウィンドウを閉じる */
               var infowindow=new google.maps.InfoWindow({
                   content: contentString
               });
               infowindow.open(map, marker);
               tmp[i]=infowindow;   /* 情報ウィンドウオブジェクト格納 */
               
            });
         }
         /* 情報ウィンドウをすべて閉じる */
         function clear(){
            for(var i in tmp){
               if(tmp[i]){
                  tmp[i].close();
               }
            }
         }
      });
   </script>
   <style>
      * {
         margin:0; padding:0;
         font-size:12px;
      }
      body {
         line-height:1.2;
         margin:20px;
      }
      #box {
         margin:0 0 20px 0; padding:0;
         width:498px;
      }
      #box h2 {
         margin:0; padding:0;
         font-size:13px;
      }
      #box p.license {
         font-size:11px;
         text-align:center;
      }
      #infowin {
         margin:0; padding:0;
         font-size:12px;
         line-height:1.2;
      }
      #infowin div.inner {
         text-align:center;
      }
      #infowin p {
         margin:0; padding:0;
         overflow:hidden;
      }
      #map {
         width:498px; height:498px;
         margin:0 0 5px 0; padding:0;
      }
   </style>
<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>
   <div id="box">
      <h2>表参道周辺の写真</h2>
      <p>地図上マーカーをクリックすると、その場所のPanoramio写真を情報ウィンドウで表示します。</p>
      <div id="map"></div>
      <p class="license">Panoramio提供の写真の著作権はそのオーナーに帰属します。</p>
   </div>
</body>
</html>