Panoramio is a community-powered site for exploring places through photography: cities, natural wonders, or anywhere you might go. You can add community contributed photos to your map with the Panoramio layer.
Overview
You may add photos from [Panoramio] as a layer to your maps using the
PanoramioLayer object. The PanoramioLayer renders a layer of geotagged
photo icons from Panoramio on the map as a series of large and small photo
icons.
Note: The concepts within this section refer to features only available within
the google.maps.panoramio library. This library is not loaded by default when
you load the Maps Javascript API but must be explicitly specified through use
of a libraries bootstrap parameter.
See the Libraries
Overview for more information.
To add a PanoramioLayer to your map, simply create the object
and set its map property:
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);
By default, clicking on a photo icon within a Panoramio layer brings up an info
window with a larger photo and more information. You may remove this default
behavior by setting the layer’s suppressInfoWindows property to true. You
may inspect the metadata associated with an individual Panoramio photo by
handling the 'click' event on the PanoramioLayer and inspecting the
PanoramioMouseEvent for its featureDetails property. Note that if you
implement your own click handler and do not display the default info window,
your use of Panoramio photos must comply with the Panoramio API Terms of
Service, including any branding and attribution requirements.
The following example shows a Panoramio layer for Seattle, WA. Clicking on a photo appends a list of links to Panoramio photo pages in a right-hand panel:
function initialize() {
var mapOptions = {
zoom: 16,
center: new google.maps.LatLng(47.651743, -122.349243)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);
var photoPanel = document.getElementById('photo-panel');
map.controls[google.maps.ControlPosition.RIGHT_TOP].push(photoPanel);
google.maps.event.addListener(panoramioLayer, 'click', function(photo) {
var li = document.createElement('li');
var link = document.createElement('a');
link.innerHTML = photo.featureDetails.title + ': ' +
photo.featureDetails.author;
link.setAttribute('href', photo.featureDetails.url);
li.appendChild(link);
photoPanel.appendChild(li);
photoPanel.style.display = 'block';
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Restricting Photos by Tag or User ID
You may restrict the set of photos to display on a PanoramioLayer
to those matching a certain textual tag, or those matching a particular user.
To restrict photos to those of a particular tag, call setTag() on the
PanoramioLayer object. The layer will update to only show photos matching
that tag within the map’s viewport. To restrict photos to those of a particular
user, call setUserId() on the PanoramioLayer object.
The following example displays a map of New York harbor with no tag filtering.
Entering text in the input field applies a filter using the
setTag() method:
function initialize() {
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(40.693134, -74.031028)
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var panoramioLayer = new google.maps.panoramio.PanoramioLayer();
panoramioLayer.setMap(map);
var tag = document.getElementById('tag');
var button = document.getElementById('filter-button');
google.maps.event.addDomListener(button, 'click', function() {
panoramioLayer.setTag(tag.value);
});
map.controls[google.maps.ControlPosition.TOP_CENTER].push(
document.getElementById('filter'));
}
google.maps.event.addDomListener(window, 'load', initialize);
Using the Panoramio Widget API
You may also use the Panoramio Widget
API to display images within a
PanoramioWidget object. To use the Panoramio API, you will need to load the
Javascript symbols for that API separately from the Javascript API via a script
tag:
<script type="text/javascript" src="http://www.panoramio.com/wapi/wapi.js?v=1">
</script>
The Panoramio PhotoWidget has a default size of 400 x 300 pixels. If you wish
to display a PhotoWidget within an info window, you may either use this
default size, or set one explicitly within the PhotoWidget’s constructor.
Note that the PhotoWidget will not size itself automatically based on its
container (the info window in this case). Instead, you will need to explicitly
set the widget’s width and height.
The following example uses the Panoramio Widget API to populate an info window with a Panoramio image. Note that the widget could be easily configured to display more than one image.
function initialize() {
// The photoDiv defines the DIV within the info window for
// displaying the Panoramio photo within its PhotoWidget.
var photoDiv = document.createElement('div');
// The PhotoWidget width and height are expressed as number values,
// not string values.
var photoWidgetOptions = {
width: 640,
height: 500
};
// We construct a PhotoWidget here with a blank (null) request as we
// don't yet have a photo to populate it.
var photoWidget = new panoramio.PhotoWidget(photoDiv, null,
photoWidgetOptions);
var monoLake = new google.maps.LatLng(37.973432, -119.093170);
var mapOptions = {
zoom: 11,
center: monoLake
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var infoWindow = new google.maps.InfoWindow();
var panoramioLayer = new google.maps.panoramio.PanoramioLayer({
suppressInfoWindows: true
});
panoramioLayer.setMap(map);
google.maps.event.addListener(panoramioLayer, 'click', function(e) {
var photoRequestOptions = {
ids: [{
'photoId': e.featureDetails.photoId,
'userId': e.featureDetails.userId
}]
};
photoWidget.setRequest(photoRequestOptions);
photoWidget.setPosition(0);
infoWindow.setPosition(e.latLng);
infoWindow.open(map);
infoWindow.setContent(photoDiv);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Consult the Panoramio Javascript API documentation for full information on using this API.