A few weeks ago, we launched two layers on maps.google.com, accessible via the "More.." button. The photos layer displays Panoramio photos, continuously loading in more photos as you zoom in, and letting you click the photos to see the info window with more information. Behind the scenes, the implementation is basically a GTileLayerOverlay plus array of pixel bounds specifying the clickable areas. It's a clever technique that can be used whenever you have vast amounts of potentially clickable data, and a server that can render out tiles. However, I'm here today to show you how to create a similar effect using MarkerManager plus Panoramio's API.
GTileLayerOverlay
MarkerManager
The Panoramio API lets you specify a bounding box query, sort by popularity, and output its data in JSON format. The MarkerManager lets you specify marker batches per zoom level ranges, and only displays the markers for the current viewport. Using these features, we can then do the following:
http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=public&from=0&to=10&minx=-124.29382324218749&miny=36.089060460282006&maxx=-119.8773193359375&maxy=38.724090458956965&callback=MyCallback
The effect to the user is that additional photos stream in and populate the map as they zoom in - check it out below or here. You can use this technique whenever you have a database that can be queried by bounding box and rank the results.
But if you want to just put a Panoramio button on your site, you can copy the code & scripts from this example. If you're a Panoramio user yourself, you can actually restrict the layer to only your photos by passing in your user ID to the API call. Developer Ade is experimenting with this on his ibizaA-Z site in order to just display his Ibiza photos.
Give us feedback in our Product Forums.
Follow