I've been playing again, this time with the Google Maps API. And what have I produced? Our photos by location.

This natty little page takes the photo galleries and marks them on the map, along with a link along side the map. Click on a marker or a link, and a little info window opens up showing you three thumbnails from the gallery. Click on a thumbnail to take you to the full gallery.

Make sure you explore the map as well, as not all galleries are within the map it starts on. (Hint, our honey moon and snowboarding in Morzine weren't in this country!)

As for the technical stuff, getting the map into a web page is remarkably simple, and their Google Maps API documentation will help you with that. I've put all the galleries, along with their lng and lat position into an XML file, and again using Google documentation you can figure out how that is used to place the markers on the map.

Difficulties arise when you try to get links (on the right of the map) to open the little info windows. Essentially the method that opens the marker window takes a string as the html to display in the window. However placing this on the map, and within the onClick event of a link is not easy. The solution is to give each marker a unique ID, and then place the marker object, plus the html to go in that marker's window, into separate arrays, referenced by the unique ID.

I won't go into too much more detail about it here, suffice to say if you view source you can see the code I've written, and as usual any questions you have I'm happy to answer.

Have fun exploring where we've been!