Displaying a round-the-world itinerary using Google Maps Part 2

In the last post we looked at a basic implementation of a round-the-world itinerary in Google Maps. In today’s post we’re going to add the ability to see the first photo associated with a location when you click on it.

The Google Maps API makes it fairly easy to get the photos associated with a particular place, but it helps to identify that place uniquely: while you can search for a place based on its name, it’s more efficient and reliable to get its unique “place ID” and use that instead. I used this handy PlaceD Finder tool to get the IDs associated with our various destinations and went and added them to our array.

Then it was a fairly simple matter of using the PlacesService to get the place description which includes an array of any photos associated with the place. We can then have an img element in our “info window” point at the first photo in the list.