This is a neat little trick I used when I was working on my final year project.

You will need the latest version of fancybox, my lightbox of choice.

First things first, go to google maps, and find your wanted location. Once you’ve done that, click the little ‘link’ icon in the top right hand corner and copy the iframe code it gives you. Adjusting the width/height as you see fit.

Now create a new html page placing your google map code in the body tag of said page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src=";source=s_q&amp;hl=en&amp;geocode=&amp;q=london,+uk&amp;aq=&amp;sll=51.519126,-0.107684&amp;sspn=0.008585,0.021071&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=Westminster,+London,+United+Kingdom&amp;t=m&amp;z=10&amp;ll=51.500152,-0.126236&amp;output=embed"></iframe><br /><small><a href="
m/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=london,+uk&amp;aq=&amp;sll=51.519126,-0.107684&amp;sspn=0.008585,0.021071&amp;vpsrc=0&amp;ie=UTF8&amp;hq=&amp;hnear=Westminster,+London,+United+Kingdom&amp;t=m&amp;z=10&amp;ll=51.500152,-0.126236" style="color:#0000FF;text-align:left">View Larger Map</a></small>


Now back to your main site include the relevant jquery gubbins at the top of the page:

<script type="text/javascript" src=""></script>

<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

Add this jquery to your javascript file, remember to adjust width/height to the same as your google map

$(document).ready(function() {
'frameWidth': 600, 'frameHeight': 500,

Then link it all together.

<a id="popupmap" href="map.html">View Map</a>