Adding photos from Panoramio to the map

In a previous post, I talked about an example of displaying objects from Google Places on a map. Today I will add photos of Panoramio service to them.

If anyone knows, Panoramio is a photo hosting service where images are referenced to the terrain. For some time, Panoramio is included in Google. Accordingly, there is a close integration with Google maps, earth, etc.

There are plenty of options for posting photos from Panoramio on your website.



In the example I reviewed next to the map there is a form for selecting the type of objects, I just decided to add another checkbox “photos”.

Accordingly, it remains to implement the joint work of Google Places and Panoramio Api. It turned out to be very simple: you need to load the corresponding libraries and add a layer with photos.

To download multiple libraries, you need to list them separated by commas:



"http://maps.google.com/maps/api/js?sensor=false&libraries=places,panoramio"



var map = new google.maps.Map(document.getElementById("g-map"), myOptions);





add a checkbox to the form, in case it is checked add a layer to the map:

')

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

panoramioLayer.setMap(map);';







and here is the result!







It is worth noting that the layer already contains everything that is minimally necessary: ​​when you click on a preview, a viewing window opens with a link to the photo page, while zooming, the photos corresponding to the visible area are automatically displayed.



Also, you can add the desired functionality, such as a list of viewed photos.



It only remains to add that according to Wikipedia data on October 3, 2011, Panoramio had 60 million photos and each next million is uploaded to the site in about 20 days.

This is such an amusing statistic ...