Finally found some time to play with Google Maps. It is shockingly easy to create something with it and I decided to integrate it into my webalbum. I'm using JAlbum to generate a website for my photo's and using the Chameleon skin you generate a decent website easily. The Chamelon skin already links to Google Maps, but in a separate pop-up window and I wanted to have the map info next to the photo's themselves. Another feature I wanted was to have an overview of all photo locations on the index pages. Using the Google Maps API and by tweaking the Chameleon skin this was pretty easy to accomplish.
First challenge I had to solve was one related to Google Maps. When you sign up for the Google Maps API you get a API key that must be included in the pages that display a map. This key is bound to 1 directory and since most photo albums are organized in some form or directory structure that would require a new API key for each directory. Not very practical, especially when you use a automated process to organize your photo's by date of subject like me. The solution to this was to display the map in an
iframe is then included on the web album pages and because it is always the same page displayed in the
iframe, it is possible to use 1 Google Maps API key. By including a couple of parameters (map width/height, coordinates, url of KML file) the contents of the map can be controlled by the page including the iframe.
Another challenge was not including hardcoded addresses in the templates. For a long time I was able to keep hardcoded addresses out of the solution, but in the end it became necessary to know the location at which the generated webalbum would be hosted. Reason being that the page containing the Google Maps scripts that is used in the
iframe may be at a different server/location then the webalbum. However, for the index pages the Google Maps code needs to retrieve a KML file from the location where the webalbum is hosted and therefore needs the exact address.
Two properties have been added to the JAlbum project file:
# The root where the webalbum will be hosted
# The location of the HTML page that displays the map and
# has the Google Maps code in it
# This location is bound to the Google Maps API key.
Both of the above properties could include a host name, but since I'm hosting everything on the same server that was not necessary for me.
The rest was pretty easy. JAlbum uses some template files to generate the webalbum pages and in these templates you have access to the details of the photo(s) being displayed. On the index template (index.htt) this information is used to generate a KML file of which the URL is passed to the
iframe. The index pages display 1 marker for all photo's at the same location, when clicking the marker the balloon shows thumbnails of all images at that location. Clicking on one of the thumbnails takes you to large version of that photo.
On 1 photo template (slide.htt) the information provided by JAlbum is used to pass the coordinates of the current image.
There is probably some optimization possible (see also comments in the index.htt, slide.htt and googlemaps.html file), but getting this first version to work was great fun and really easy. The changes made to the standard index.htt and slide.htt file can be easily identified by searching for 'GOOGLE MAPS'.
Want to see what it looks like? Go here.