I’ve built several maps using the Google Maps API, so I didn’t think I’d have any trouble building a map for a new pet project of mine: geocoding my beach sand collection. Geekiness aside, all I wanted to do was bring up a couple of infowindow tabs containing photos of sand and details about each beach. Sounds pretty easy, right?
Shortly after beginning the project, I realized I’d have to find a solution for displaying the photos. If I just showed thumbnails, that would be pretty boring. If I showed really large photos, the infowindows would become unwieldy. If I provided links to larger versions of the photos, they’d appear in new windows and people would have to use the “Back” button to return to the map, which would cause the infowindow to disappear. Or I could embed the photos from Flickr, but then people would click away to that site and leave the map entirely.
None of these options were ideal. Then it dawned on me: why not try Lightbox 2? This elegant script produces a window that resizes according to the size of the image and showcases the content via a darkened background with nice animation effects. It’s a freely-licensed script developed by Lokesh Dhakar that’s been around for a couple of years — and widely popular on blogs and online photo albums.
I ran smack into a major integration conflict between the Lightbox script and the Google Maps API.
In a nutshell, the problem is that LightBox looks for the rel=”lightbox” attribute when the page loads, and then it initializes the lightbox.js script and produces animation effects when a link is clicked. The Google Maps API works differently: its required window.onload and window.onunload (or <body onload=”initialize()” onunload=”GUnload()”>) event handlers place the map on the page only after the page has fully loaded. This means that the rel=”lightbox” attribute doesn’t exist when the page loads, so Lightbox doesn’t see it and the effects aren’t triggered.
After nearly a week of achingly disturbing troubleshooting, I realized this wasn’t something that would be solved with just a little tweak. It seems to me that the only solution is to entirely re-engineer the Lightbox script so that some kind of initLightbox() function can be activated from an onclick event inside the infowindow.
If you’re thinking of going down that road, stop now and give Slimbox a try — it’s a Lightbox clone built on the mootools framework that can also be launched as an API. Slimbox works without any modification, so it’s an “out-of-the-box” solution that should function well as new versions are released. And it can be done in 5 easy steps:
1) Download Slimbox
Download Slimbox and copy the files to the directory where your Google Map is located.
2) Add the Script
Include the script in the header of your page:
3) Add the CSS
Include the CSS reference in the header of your page:
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />
4) Add the Attribute
Add the rel=”lightbox” attribute to your infowindow links.
5) Add the onclick Event
Add an onclick event to your infowindow links:
onclick='Slimbox.open(\"Image.jpg\", \"Caption\");return false'
For a slideshow, put the images into an array and add a group name to the rel attribute (consult the Slimbox.open API documentation for complete syntax information):
onclick='Slimbox.open([[\"Image1\", \"Caption1\"], [\"Image2\", \"Caption2\"]], 0);return false' rel=\"lightbox-groupname\"
** Here’s an example of the code in action
Update (12/12/2009): The above example now includes Clearbox, which has a nifty auto slideshow.
Update (02/11/2011): Here’s the Google Maps API v.3 example
I’m so stoked about this solution that I’m releasing a sneak preview of my sand mashup. Now that I’m past this stumbling block, I’ll finally get to work on this thing and post an update when it’s finished. Hopefully I have saved you some time and freed you to do wonderful things with your own maps.