Hack 15. Map a Slideshow of Your Travels

Show your friends and family not just what you saw on your vacation, but where you saw it.

Wouldn't it be cool to be able to show your friends and family not only what you saw on your vacation, but also where each photo was taken? Thanks to Google Maps' simple API, you can very easily make a slideshow to put on your web site.

Travelogue slideshows are as old as the film slide projector itself. The Google Maps API and a dab of JavaScript can dust off the ancient tradition, and show off the places you've been with an amazing amount of detail. What's more, little touches like the API's animated map panning function lend a sense of motion to the story of your travels. Figure 2-15 shows a slideshow I put together of my vacation last year to the Burning Man Festival in Black Rock City, Nevada. This slideshow can also be seen online at http://igargoyle.com/slideshow.html.

Figure 2-15. Make a slideshow that will captivate your friends and family

For my map, I took the photos from Black Rock City and added titles and descriptions for each image to better tell the story of my trip. Since my relatives live on the other side of the world, this makes it very easy for me to update them about what's going on in my lifeand show off photos without having to lob off enormous emails, stuffed with unreadable attachments.

To get started, you're going to need photos, each with its own latitude and longitude coordinates. The easiest way to do this is by bringing along a GPS when you photograph, and mark each image with a waypoint or write the location on a notepad. If you're interested in doing large batches of photos, pick up a copy of O'Reilly's Mapping Hacks and learn more about cross-referencing GPX tracklogs with the EXIF timestamp of digital photographs. alternatively, you can adapt the technique described in "Where Did the User Click?" [Hack #11], and use your memory and a few map clicks to find the coordinates of where your photos were taken.

2.7.1. The Code

However you assemble the metadata for your photographs, you'll wind up with a JavaScript object that probably looks like this:

	var myObj = {"photos": [
	 {"img": "http://igargoyle.com/theman.jpg",
	 "longitude": "-119.236402821", "latitude": "40.754786911",
	 "title": "Black Rock City: 2005",
	 "description": "A Playa Slideshow using Google Maps. Just email
	this to your friends, and when it loads, it will start playing
	automatically."},
	 {"img": "http://igargoyle.com/hammockhangout.jpg",
	 "longitude": "-119.233165", "latitude": "40.7590351",
	 "title": "The Hammock Hangout",
	 "description": "A GIANT tent that uses passive solar principles to
	stay cool during the day. Housed 50 hammocks, and had room for people to set
	up their own too."},
	 {"img": "http://igargoyle.com/us.jpg",
	 "longitude": "-119.246943567", "latitude": "40.752424806",
	 "title": "Some of the gang in camp ROAMnet",
	 "description": "Karl, Jay, Jana, and Nym."},
	 ]
	};

To set up the timers for these slides, we can access the data array like so:

	for (i = 0; i < myObj.photos.length; i++) {
	 img = myObj.photos[i].img;
	 longitude = myObj.photos[i].longitude;
	 latitude = myObj.photos[i].latitude;
	 title = myObj.photos[i].title;
	 description = myObj.photos[i].description;

	 loadPhoto(img, longitude, latitude, i, title, description);
	}

The loadPhoto function takes these arguments and creates an anonymous function that calls the browser's built-in window.setTimeout function. This is the most important part of the hack because it tells the function to run at a certain time, specified in milliseconds. In this function, 10000*time calculates the time for each photo, so the first photo loads immediately, the second photo loads after 10 seconds, the third photo loads after 20 seconds, and so on.

	function loadPhoto(photoURL, longitude, latitude, time, title, description)
	{
	 // A simple timer, which delays the creation of the new
	 // marker, changes the photo, and recenters the map.
	 window.setTimeout( function() {
	 // Create and place a marker for the photograph's location
	 var marker = new GMarker(new GPoint(longitude, latitude));
	 map.addOverlay(marker);

	 // Change the titleBox and descriptionBox to reflect the
	 // new photo's title and description
	 document.getElementById("titleBox").innerHTML = title;
	 document.getElementById("descriptionBox").innerHTML = description;

	 // Change the src location of the photo element to the new location.
	 document.getElementById("photo").src=photoURL;

	 // Have our Google Map recenter or pan to the new location
	 map.recenterOrPanToLatLng(new GPoint(longitude, latitude));

	 }, 10000 * time); // Change 10000 to speed up or slow down the
	slideshow.
	}

The function inside the setTimeout does all the real work, though. To begin with, it creates the marker for your photo using the GMarker constructor, and then a call to the map's addOverlay function. Secondly, this function displays the title and description on the page by calling each container and setting its respective innerHTML properties. Next, the function changes the source location of the only img element on our page to that of the current photo. Once all this is done, the map is re-centered on the new marker by using a call to the map's recenterOrPanToLatLong method. In my example, I made sure the points were close enough together to cause the map to pan instead of re-center, because it's great to see the map glide from one location to another.

A slideshow is a wonderful way to captivate your audience and tell a story. So get out there and make something truly wonderful that your family and friends will remember for years to come!

2.7.2. See Also

• The slideshow concept can also be integrated with photos stored on Flickr [Hacks #47 and #48].

Tom Longson