Show the Panoramio Photos of multiple users on one Map?

Co-WIN

unread,

Jun 9, 2011, 4:57:32 AM6/9/11

to panora...@googlegroups.com

Hi,

Is it possible to show more than 1 user's panoramio photos on one map?

The following code shows 1 user only.

var panoramioOptions = {
userId: 'xxxxxxx'
}

Many thanks!!!

QuentinUK

unread,

Jun 10, 2011, 8:59:59 PM6/10/11

to panora...@googlegroups.com

You can use the Google maps Panoramio overlay API. Then you can add two Panoramio layers, one for each user.

QuentinUK

unread,

Nov 23, 2011, 4:15:23 AM11/23/11

to panora...@googlegroups.com

Here's code for a map with multiple users (or tags)

Code:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 

<html> 

<head> 

<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 

<title>Pictures</title> 

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" /> 

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio"></script> 

<script type="text/javascript"> 

function getPos(){};

function ParseParams(urlParams){ 

urlParams= urlParams||{}; 

var e,a= /\+/g, 

    r=/([^&=]+)=?([^&=]*)/g, 

    d=function(s){return decodeURIComponent(s.replace(a," "));}, 

    q=window.location.search.substring(1); 

while(e=r.exec(q)) 

    urlParams[d(e[1])]=d(e[2]); 

return urlParams; 

}; 



function initialize(urlParams){ 

    var pos = new google.maps.LatLng(urlParams.lat,urlParams.lng); 

    var myOptions = { 

    zoom: Number(urlParams.zoom), 

    center: pos, 

    mapTypeId: google.maps.MapTypeId.ROADMAP 

  }; 

  // add panoramio layers, either users or tags

  google.maps.Map.prototype.addLayers = function(paramsString, panoSetFn){

    if(paramsString){// maybe don't add any at all

       paramsString.split(",").forEach(function(param){// comma separated list

          var panoramioLayer = new google.maps.panoramio.PanoramioLayer(); 

          panoramioLayer.setMap(this);  

          panoSetFn.call(panoramioLayer,param);

       }, this);

    } 

  }

  // useful fn to find location from browser's address line 

  getPos = function(){return "lat="+map.center.lat().toFixed(6)

     +"&lng="+map.center.lng().toFixed(6)+"&zoom="+map.zoom;} 



  var map_canvas = document.getElementById("map_canvas"); 

  var map = new google.maps.Map(map_canvas, myOptions); 



   map.addLayers(urlParams.tag, google.maps.panoramio.PanoramioLayer.prototype.setTag);

   map.addLayers(urlParams.user, google.maps.panoramio.PanoramioLayer.prototype.setUserId);

} 



</script> 

</head> 



<body onload="initialize(ParseParams({lat:51,lng:0,zoom:10}))"> 

<div id="map_canvas"></div> 

</script> 

</body> 

</html>

Put the above in a file, here called p1.html, then call as an iframe:-

Code:

<iframe style="margin: 10px" 

src="p1.html?lat=51&amp;lng=0&amp;zoom=10&amp;user=2419040,1424012" 

frameborder="0" width="400" height="400" marginwidth="0" marginheight="0"> </iframe>

Each user id separated by a comma
(ps also works for multiple tags thus:- tag=四,17mm

QuentinUK

unread,

Nov 24, 2011, 5:02:52 PM11/24/11

to panora...@googlegroups.com

// fix the clipping of images in pop-up bug (possibly change title!)
google.maps.event.addListener(panoramioLayer, 'click', function(event){
var height = event.featureDetails.aspectRatio>1?240/event.featureDetails.aspectRatio:240;
var width = event.featureDetails.aspectRatio>1?240:240*event.featureDetails.aspectRatio;
event.infoWindowHtml=event.infoWindowHtml.replace("width: 300px; height: 180px;",
"width: "+width.toFixed()+"px;height: "
+height.toFixed()+"px;margin-left:auto; margin-right:auto;");

});

This is a mod to get around the bug (Google's, not mine) where the pop up clips the bottom of portrait mode photographs.

Insert it after the line "panoSetFn.call(panoramioLayer,param);"

QuentinUK

unread,

Nov 24, 2011, 5:07:42 PM11/24/11

to panora...@googlegroups.com

Here is a mod to get the copyright notice on the bottom of the map.

var panoramioNotice = document.getElementById('panoramio_Notice');
map.controls[google.maps.ControlPosition.BOTTOM].push(panoramioNotice);

Place at the end of the initialize function

Add the following at the end of the <body> section.

<div id="panoramio_Notice" style="overflow-y: auto;overflow-x: hidden;width: 300px;font-size: 12px;font-family: Ariel;">
<a href="http://www.panoramio.com" target="_blank">
<img src="http://www.panoramio.com/img/header-logo.png" height="12"></a>Photos copyright their owners</div>

QuentinUK

unread,

Feb 8, 2012, 1:27:44 AM2/8/12

to panora...@googlegroups.com

Here's the above together as one file:-

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Pictures</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=panoramio"></script>
<script type="text/javascript">

function getPos(){};// declare global function defined later

function ParseParams(urlParams){
urlParams= urlParams||{};
var e,a= /\+/g,
r=/([^&=]+)=?([^&=]*)/g,
d=function(s){return decodeURIComponent(s.replace(a," "));},
q=window.location.search.substring(1);
while(e=r.exec(q))
urlParams[d(e[1])]=d(e[2]);
return urlParams;
};
function initialize(urlParams){

var myOptions = {
zoom: Number(urlParams.zoom),

center: new google.maps.LatLng(urlParams.lat, urlParams.lng),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// add panoramio layers, either users or tags, panoSetFn="setUserId" or "setTag"

google.maps.Map.prototype.addLayers = function(paramsString, panoSetFn){
if(paramsString){// maybe don't add any at all
paramsString.split(",").forEach(function(param){// comma separated list
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(this);

panoramioLayer[panoSetFn](param);

// fix the clipping of images in pop-up bug (possibly change title!)
google.maps.event.addListener(panoramioLayer, 'click', function(event){
var height = event.featureDetails.aspectRatio>1?240/event.featureDetails.aspectRatio:240;
var width = event.featureDetails.aspectRatio>1?240:240*event.featureDetails.aspectRatio;
event.infoWindowHtml=event.infoWindowHtml.replace("width: 300px; height: 180px;",
"width: "+width.toFixed()+"px;height: "
+height.toFixed()+"px;margin-left:auto; margin-right:auto;");
});

}, this);// this = map, see map.addLayers

}
}
// useful fn to find location from browser's address line
getPos = function(){return "lat="+map.center.lat().toFixed(6)
+"&lng="+map.center.lng().toFixed(6)+"&zoom="+map.zoom;}

var mapCanvas = document.getElementById("map_Canvas");
var map = new google.maps.Map(mapCanvas, myOptions);
map.addLayers(urlParams.tag, "setTag");
map.addLayers(urlParams.user, "setUserId");
// place copyright notice on top of map

var panoramioNotice = document.getElementById('panoramio_Notice');
map.controls[google.maps.ControlPosition.BOTTOM].push(panoramioNotice);
}

</script>
</head>
<body onload='initialize(ParseParams({lat:51.497059,lng:-0.091668,zoom:12}))'>
<div id="map_Canvas"></div>

<div id="panoramio_Notice" style="overflow-y: auto;overflow-x: hidden;width: 300px;font-size: 12px;font-family: Ariel;">
<a href="http://www.panoramio.com" target="_blank">
<img src="http://www.panoramio.com/img/header-logo.png" height="12"></a>Photos copyright their owners</div>

</body>
</html>

Reply all

Reply to author

Forward