地図上マーカーをクリックすると、その場所の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 & 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>