Maybe you already know the image
JS lighbox by Lokesh Dhakar which overlays images on your site. Inspired by that, I decided to program something similar for Google Maps. Ideas and principles are the same:
- Make a link to a URL with the HTML-tag a.
- Adding a relation to that tag through the attribute rel.
- Example: <a href="%google_map_link" rel="gmap">Blabla</a>
Afterwards, a JavaScript will scan all links with the relation ‘gmap’ and add an extra
onclick behaviour to it, which will overlay a Google Map on your browser once you click it.
This method has a great advantage as people can access the map even from their RSS-readers. The script will only run inside the site where it will parse the Google Maps URL and build up an embedded and overlaid map.
To see the script in action, just click one of the links underneath:
I’ve been there and there, but would also like to go there too.
Click here to download gmlightbox 0.1
Script has been tested with FF2 and IE7 but I have no idea what it will look like in IE6.
Installation can be done easily in 4 steps:
- Unzip the files on your server.
- Ask a Google Maps key for use on your server and insert that into your page/templates.
- Include the gmlightbox JavaScript (urlbase matches your site):
<script src="http://%urlbase%/gmlightbox/gmlightbox.js" type="text/javascript"></script></li> - Include the gmlightbox CSS:
<link href="http://%urlbase%/gmlightbox/gmlightbox.css" rel="stylesheet"/>
Once those four steps are done, you are ready to use gmlightbox. For using it, two easy steps:
- Go to Google Maps and find the spot you want to show. Once you've got it, click « Link to this page ».
- Replace %google_maps_url% by that Google Maps link:
<a href="%google_maps_url%" rel="gmap" title="Title">Hellow</a>
Ready!
As this script is not quite perfect yet, please notify me of any bugs or annoyances. I'm open to critic. I will adapt and post updates of it once it has been changed.
PS (12 Dec 07) : I am currently working on an update of this script. It will be released soon, by the end of the year I hope.
