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, this 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
skin.webroot=/webalbums/gero
# 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.
skin.map.iframe=/webalbums/googlemap.html
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.
Labels: googlemaps, jalbum, webalbum
16 comments:
Posts
Hi i tried to patch my existing Chameleon skin according you definition
1. replace index.htt, slide.htt from your posting to
--> C:\Program Files\JAlbumWin\skins\Chameleon
2. insert the two params skin.webroot, skin.map.iframe to
--> jalbum-settings_chameleon.jap
3. copy the file googlemaps.html to my root folder of my album
--> /Album/googlemaps.html
4. Create Album
I'm not seeing the google map in the slide or in the inde view
Whats wrong ?
Note: Comment imported. Original by Anonymous at 2008-01-20 20:56
I'm assuming that the skin.map.iframe property correctly points to the googlemaps.html file on your server. (so you can access that one from the browser, it then does not show anything but at least you're sure it can be accessed.)
In the googlemaps.html file there is a section that contains the Google Maps API key. This key is bound to a specific directory on a server and in this case it is my server. What you need to do is to get your own Google Maps API key at http://code.google.com/apis/maps/signup.html and then include this in the JavaScript code below the comment that has 'Google Maps API key' in it in the googlemaps.html file.
Hope this helps...
Gero
Note: Comment imported. Original by Gero Vermaas ( email: gero@vermaas.net website: http://vermaas.net ) at 2008-01-21 11:06
Hi Gero
I tried everthing and it's not working. I think there something basically wrong. If I search your index.html I can find the
function getGoogleMapsIframe(iframeUrl)
in my one there is nothing in that direction. Which part of Jalbum is embedding the function? I think there's the error.
Cheers
Marc
Note: Comment imported. Original by Anonymous at 2008-01-21 21:30
The getGoogleMapsIframe() function is in the index.htt file, you'll need to copy this file into the JAlbum/skins/Chameleon directory (and also the slide.htt file)
Regards,
Gero
Note: Comment imported. Original by Gero Vermaas ( email: gero@vermaas.net website: http://vermaas.net ) at 2008-01-22 09:52
I did and it's not working. I'm using JAlbum 7.4 1
Do you think it could be dependend on the version ?
Note: Comment imported. Original by Anonymous at 2008-01-22 22:40
Maybe it is dependent on the version. I'm running 7.3. Any change you can try 7.3?
Gero
Note: Comment imported. Original by Gero Vermaas at 2008-01-23 10:33
Hi,
I tried using JAbum 7.4.1 and also discovered that it does not work with 7.4.1. I'm fixing this now and will post a new blog entry shortly describing the changes needed.
Gero
Note: Comment imported. Original by Gero Vermaas ( email: gero@vermaas.net website: http://vermaas.net ) at 2008-02-02 14:16
Hi Gero,
Thanks for this cool addon. I modified it a bit to use some Windows properties from the image, and geocode the address using Google's geocoder URL (http://maps.google.com/maps/geo?q=some_address).
Thanks once again.
-RD
Note: Comment imported. Original by Anonymous at 2008-05-12 02:31
on your webalbum page I don't see a map next to the image on the slides, only only on the index page.
@Anonymous
Maps are only shown for albums that have pictures with GPS coordinates. See for example http://gerodt.homeip.net/webalbums/gero/By%20Date/2009/01%20January/index.html
but there also I can only see a map on the index page. slides don't show the map, see for example this link:
http://gerodt.homeip.net/webalbums/gero/By%20Date/2009/01%20January/slides/DSCN2896.html
I have a question: You write that you do this whole iframe thing because the Google Maps API key is limited to one directory. However, when you signup for that key at Google, it says
"Tip: Signing up a key for http://yourdomain.com is usually the best practice, as it will work for all subdomains and directories. See this FAQ for more information."
So one API key should be fine. In fact, your Chamaeleon mod could probably be published and installed as a normal skin, without having to modify files individually, all one would need is to enter the API key. Or am I missing something here?
@Anonymous
I see what you mean, will investigate...
@Chris
Back when I made this, it was not possible to use 1 key for your whole domain (AFAIK), but now that it is possible, you're right.
Hi Gero,
I had a lot of fun with your skin and meanwhile managed to upload my album the way I want it. However, I discovered two things, one if which I was able to fix:
1) If one wants to include the original images in the album, one has to choose "Link to originals via scaled images" in jalbum settings/navigation. When doing this, the slide pages get created without map. By editing slide.htt I could fix this, I uploaded the new slide.htt at www.larovo.com/files/slide.htt
2) If you have many pictures, you will notice that on all index pages except the first one the Google Map does not work. Example:
http://gerodt.homeip.net/webalbums/gero/By%20Date/2008/05%20May/index2.html Instead, the map on the first index page does contain markers for ALL images, even those on the other index pages. I don't know if and how this can be fixed.
By the way, the whole thing doesn't work in the most recent Jalbum anymore, but that's fine, as one can easily download 8.1.6 on the jalbum web site.
Hi,
I've incorporated your suggestions in new version of the index.htt and slide.htt files. See this post:
http://blog.vermaas.net/2009/12/improved-google-maps-integration-with.html
Gero