Google Maps JavaScript API v3Panoramioライブラリ
- Panoramioレイヤライブラリについて〔デフォルト〕
- Panoramioレイヤを地図上に表示（情報ウィンドウに写真を表示）〔suppressInfoWindows=false〕
- Panoramioレイヤを地図上に表示（カスタム情報ウィンドウで写真を表示）〔suppressInfoWindows=false〕
Panoramioレイヤライブラリについて
デフォルト
2013/4/7
Google Maps JavaScript API v3 - Panoramioレイヤ（ライブラリ）
Panoramioの写真をレイヤとして地図上に大小タイル状に表示できるライブラリです。
Panoramioレイヤを使用するには、Google Maps APIを読み込むときにパラメータを付加します。
http://maps.google.com/maps/api/js?sensor=true&libraries=panoramio
Panoramioレイヤを地図に追加するには、地図オブジェクトを生成した後で、以下のようにPanoramioLayerオブジェクトを生成して地図に追加します。
var panoramioLayer=new google.maps.panoramio.PanoramioLayer(); panoramioLayer.setMap(map);
Panoramio APIの使い方や制限事項についてはこちらで解説しています。
» Panoramio API
» Panoramio写真をサイトに表示する際の注意点
ドキュメントには、Panoramio APIの規約に準じて使用するようにとあるのですが、Panoramioの規約では、1ページにつき50枚までしか表示してはいけないことになっています。 Panoramioレイヤはご覧のように写真の大小タイルが50枚以上出てしまうのですが、クリアなのかどうかが気になるところ。
デフォルトだと、写真タイルをクリックすると、smallサイズのPanoramio写真が情報ウィンドウで表示されます。 情報ウィンドウ内のPanoramioのロゴ、写真のタイトル、投稿者情報などは自動的に表示されます。 以下は、Panoramioレイヤの表示・非表示をボタンで切り替えるサンプルです。
設置サンプルサンプルを見る
<!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>
</head>
<body>
<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>
Panoramioレイヤを地図上に表示（情報ウィンドウに写真を表示）
suppressInfoWindows=false
2013/4/7
Panoramioレイヤの各タイルをクリックすると、情報ウィンドウを独自に生成して、Panoramio写真（mediumサイズ）を表示するサンプルです。
suppressInfoWindowsは"false"を指定して、デフォルトの動きは無効化しています。 独自にウィンドウを出す場合は、Panoramio APIの規約で定められた情報を出す必要があります。 詳細は、Panoramio写真をサイトに表示する際の注意点を参考にしてください。
Panoramio写真サイズは「http://mw2.google.com/mw-panoramio/photos/{サイズ}/{写真ID}.jpg」形式のURL好きなサイズを指定できます。 指定可能なサイズはsizeパラメータを参照ください。
var panoramioLayer=new google.maps.panoramio.PanoramioLayer({
suppressInfoWindows:false
});
panoramioLayer.setMap(map);
設置サンプルサンプルを見る
<!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: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;
});
/* 写真タイルをクリックしたら情報ウィンドウを生成して、Panoramio写真を表示 */
google.maps.event.addListener(panoramioLayer,"click",function(photo){
closeInfoWindowPano();
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' class='size shadow' /></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 infowindow=new google.maps.InfoWindow({
content:"<div class='panowin'>"+s+"</div>"
});
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>
</head>
<body>
<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を切り替えます。<br>
suppressInfoWindowsに"false"を指定して、デフォルトの動きは無効化しています。<br>
写真タイルをクリックすると、情報ウィンドウを独自に生成して、Panoramio写真（mediumサイズ）を表示します。
</p>
<p><a href="#" class="button active" id="btn">panoramioLayer</a></p>
<!-- 地図の埋め込み表示 -->
<div id="map"></div>
</body>
</html>
Panoramioレイヤを地図上に表示（カスタム情報ウィンドウで写真を表示）
suppressInfoWindows=false
2013/4/7
Panoramioレイヤの各タイルをクリックすると、infoBoxを使用してカスタマイズした情報ウィンドウ内にPanoramio写真（mediumサイズ）を表示するサンプルです。
suppressInfoWindowsは"false"を指定して、デフォルトの動きは無効化しています。 独自にウィンドウを出す場合は、Panoramio APIの規約で定められた情報を出す必要があります。 詳細は、Panoramio写真をサイトに表示する際の注意点を参考にしてください。
var panoramioLayer=new google.maps.panoramio.PanoramioLayer({
suppressInfoWindows:false
});
panoramioLayer.setMap(map);
設置サンプルサンプルを見る
<!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>
</head>
<body>
<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>