Google Maps Lightbox…

01.03.2007 by Mich

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.

tags: gmlightbox . google-maps . mash-up |

Phil (30/03/2007 @ 00:17)

Hi there, the ZIP is corrupt for gmlightbox

Dave Katten (08/04/2007 @ 07:24)

Love the library.

FYI, I can't get it to work in Safari or Shiira (another browser that uses WebKit) for some reason. but camino and opera are fine.

But yeah, thanks for the library.

Chris Ward (21/04/2007 @ 19:59)

I see you say that the GMlightbox and GeoTagging plugins can work together, but I do not understand how. I've only just now downloaded them, and i'm exploring them now, but it would be great if you could setup a little example or tutorial for how to get them working together. THESE plugins rock! Please shoot me an email if you could spend a couple minutes explaining to me how I could do it. I would greatly appreciate it. Thanks!

-Chris

Chris Ward (21/04/2007 @ 20:11)

Okay, I realize how to get the script working. However when i click the Show on Map link, it begins to load the GMlightbox map but ends up loading the map on Googlemaps, and takes me away from the hosting site. I'd like to have it work just as you have it in the examples above showing the script in action.

Thanks!

-Chris

Dean (14/05/2007 @ 14:01)

Im having the same trouble as chris. It starts to load like in the examples here then just goes off to he google maps page

Mich (14/05/2007 @ 14:27)

Didn't you forget to include the google maps script file you get to see in the example when you subscribe for an API key on the google site ?

Dean (14/05/2007 @ 15:12)

I worked out the trouble! You need the full url that google gives you when you click that get the link to this page, mine works now...thanks

If you want to be able to use postcodes with it then you can use this php code to turn a UK post code into long and lat split by a newline (\n)

$data=file_get_contents("http://maps.google.co.uk/maps?f=q&hl=en&q=$_GET[p]");
$matches=preg_match("/{lat: (.*)}/", $data,$ma);
$f=explode("}",$ma[0]);
$f=$f[0];
$f=str_replace("{lat: ","",$f);
$f=str_replace("lng: ","",$f);
$f=explode(",",$f);
$lat=$f[0];
$long=$f[1];
echo $lat."\n".$long;
?>

ue it like this getlat.php?p=mypostcode

hope someone finds it of use

bw (31/05/2007 @ 21:01)

any way to add a custom marker to this code? i look through it but cant figure out where the new marker is actually being constructed.

webosb (05/06/2007 @ 22:52)

Anyway you can make the marker clickable with directions to?

Sort of like this one but without the PHP:
http://www.phpinsider.com/php/code/GoogleMapAPI/

serdar (02/07/2007 @ 03:04)

google my map how execute, English that sorry

frank (19/07/2007 @ 10:43)

this rocks
thanks a lot

Gouy (09/08/2007 @ 16:02)

Hi there. How show label in gmlightbox ?

PBS (13/12/2007 @ 05:37)

Is there a way to get this working with an image map please?

Henry (28/12/2007 @ 20:03)

Looking forward to seeing what's next with this script...I just implemented it on my travelogue as I'm going back and geocoding older entries.

For an example see:

http://theglobalguy.com/latin-america/the-atacama-desert-and-bolivian-salt-flats and click "map this post" on the top.

amiroo (01/04/2008 @ 16:23)

I still haven't quite figuered out where to put the API Key.
I really need this feature. Can anyone help me

Juan Carlos (09/04/2008 @ 15:36)

Can you help me? I've installed this Script in my Blog and when i try to open a Google maps in "VER MAPA" http://www.hotelsbarcelonablog.com/tapa-tapa-restaurante-barcelona-centro/ the google maps it's open in the Google Maps web site. I need your help pleaseeee. Thanks (foxlethal@hotmail.com)

kakaroto (02/06/2008 @ 16:25)

Hi thank you very much for this, i'm loving it. Just a question, you know how to put a 'print' button. I've tried a few javascript codes but no success.

ja (04/06/2008 @ 11:52)

the map doesnt work in ie6? any ideas how to make it work

Reinder (22/06/2008 @ 19:36)

Can anyone tell me if it is possible to load a hidden div containing my own customized google map?

Corey (26/08/2008 @ 23:09)

I am having issues downloading your script. It says that the file cannot be found on the server. Can you upload the file again?

Mike (22/09/2008 @ 09:03)

How would you go about launching this from within Flash? Could you add the Javascript to be added to the page along with the appropriate getURL code for inside Flash.

r0bb13 (23/09/2008 @ 11:25)

The script works well in FF but in IE6 the overlay div stays at the top of the page if you go down. There is also a select input that appears over the map

(this is something that we could expect for this browser)

Frank Sykes (01/10/2008 @ 18:52)

Hi,

I've tried using your script. Got as far as bringing the window up but the map content doesn't work. here's the link. I'm sure there's just a small tweek.
http://www.kennedymonk.com/test/
can you help?
Thanks
F.

Viper (02/11/2008 @ 09:25)

problem on mine... not sure what I'm doing wrong... must be an order or something...

http://www.journeyac.com
let me know if you can see an easy fix. I see Sykes works now... what did you do there Frank!?!

Matt (13/01/2009 @ 14:17)

Any idea why mine might just display a blank google map? All it has is a dark-grey background, the google logo and terms of use link. No other content is visible.

Regards.

Darren (21/01/2009 @ 16:19)

Hi i've got the same problem as Matt just a blank google map with logos and nav but nothing else.

Any ideas?????

Darren (26/01/2009 @ 17:24)

Was anyone able to get the overlay problem fixed in IE6?????

Gavin (19/02/2009 @ 03:03)

"I’ve been there and there, but would also like to go there too." .... None of these examples work for me. They just behave like normal links. I'm using IE7.

zac (10/04/2009 @ 03:58)

Using FF 3 and your demos dont work for me either

Danny Gopie (13/04/2009 @ 13:11)

Hi,

Its absolutely NOT working on IE7 and firefox 2.x
I made a correct link for example:

test

The css and js files in included correctly, even with the full path.
WHen I want to open it with IE or FF, it shows the window and then redirects in the same page to the google maps site. If I use a Mouseclick event, How would this link look like?

Please help

Danny

Danny Gopie (13/04/2009 @ 16:05)

I forgot to say. You said inyour post: "a JavaScript will scan all links with the relation ‘gmap’ and add an extra onclick behaviour to it"

The link that you provided does not contain a onClick behaviour. How to implement this? I cant seem it to work i tried onClick: http://googlelink etc, but no effect.

I an tearing my hairs out now, im busy with this for 2 whole days already.

Plase help,

danny (13/04/2009 @ 16:07)

Oh yeah and your" I’ve been there and there, but would also like to go there too."
Links doesnt work also. Same problem

Jelle (10/06/2009 @ 23:45)

Thanks a lot man!
Works in ff3, ie8 and opera 9.6

Cheers,
Jelle

luke (19/07/2009 @ 13:38)

Hi, I have got your script working, thanks! I have a listings site that I would like to populate the location using values from the mysql db... e.g.

href="http://maps.google.co.uk/maps?f=q&hl=en&q=&ll=51.065106,-0.33283&spn=0.00472,0.00912&z=16&

Is this possible as I cannot seem to fathom it out

Cheers, L

Mark (02/08/2009 @ 11:03)

Hi. Great script. Thank you for taking the time to document it.

Just to help the people out who cannot get the map to display inside the lightbox (Loads lightbox and then redirects to full google maps page) - you also need to include your API at the bottom of the page (viewing the source of this page will show you where to put it). Replace the API with the one Google gave you and you're good to go.

Mark.