Geotagged Picasa JSON/KML Output + Driving Directions = Instant Scenic Tours!

Friday, June 29, 2007 at 10:24:00 AM

If you were following the Google blogs yesterday, you would have heard that Picasa now gives you a sleek drag+drop interface for geotagging your photos, and that the Picasa Google data API now outputs the geotagged data using GeoRSS & GML elements. And if you were excited by all that news and immediately visited Picasa to try out the new feature, you might have noticed the big blue KML icon next to a "View in Google Earth" hyperlink. So Picasa now gives developers geotagged photo data both in KML output and the standard Google data API output formats, and that means we map developers have a lot of ways to start playing around with Picasa photos. :)

To start off the Picasa-Maps mashups, I've put together an example that combines a Picasa photo album feed with the Map API's recently announced Driving Directions feature to calculate a driving route that will get you a similar set of photos. Now, no need to be jealous of your friends' pretty landscape albums - just copy them! Try it out below by clicking "Load Album & Route." If you want to be daring, you can try it out with your own geotagged photos by copying and pasting the "View in Google Earth" hyperlink into the box. Note that it will only work in the countries where driving directions can be calculated in the API.

How's it done? First, I pass the URL for the KML output into GGeoXML, which displays the photo markers and info windows. Then, I turn the URL for the KML output into the URL for the JSON output by replacing "alt=kml" with "alt=json-in-script", add a callback with "&callback=loadAlbumJSON", and append a script tag to the page with that new URL. When the JSON is loaded, I parse through it to find all the valid GeoRSS elements, and I add them to a waypoints array. I then use GDirections.loadFromWaypoints to get a route calculated between all the points. Once the directions has loaded, I enable the buttons that allow you to toggle the markers, route, or photos for a better view (I personally prefer no markers). If you want to delve into the code more, view source on the page. Enjoy!