Using google maps with Lightbox2

Question

Does anyone know how to show google maps using lightbox2 by Lokesh Dhakar (http://lokeshdhakar.com/projects/lightbox2/) I can see lots of examples of showing images, but none on showing maps. I was using lightbox, but it is problematic with later versions of jquery.

This is how to show an image

<a class="example-image-link" href="img/demopage/image-1.jpg" data-lightbox="example-1">
    <img class="example-image" src="img/demopage/thumb-1.jpg" alt="thumb-1" width="150" height="150"/>
</a>

I tried doing something like this, but it doesn't seem to work:

<a href="https://maps.google.co.za/maps?q=S29.103,+E30.104&hl=en&sll=29.103,-30.104&sspn=0.00824,0.016512&t=h&z=12" data-lightbox="map" >
    location
</a>

Answer 1

Straight answer

Lightbox2 does not support anything other than images.

Alternative

Heres an example of how to roll your own lightbox for Google Maps using some simple css and jQuery.

Basically the only real challenge is to resize the canvas on the first show of the overlay.

Other lightbox alternatives

• Easybox
• Fancybox
• Colorbox