title: Fancybox 2 Won't Load Google Map?
body: <p>I have been ble to get Fancybox 2 to load images without any problems. The following code allows me to click on the image (<code>barcode.gif</code>) and have it open in a fancybox without any problems (I have heavily omitted page content so that it is easier to see the image):</p>
  
  <pre><code>&lt;?php require_once('common/inc/default.php'); ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/css/default.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/css/typography.css" /&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'&gt;
      &lt;!-- Add jQuery library --&gt;
      &lt;script type="text/javascript" src="common/js/lib/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Add fancyBox main JS and CSS files --&gt;
      &lt;script type="text/javascript" src="common/js/source/jquery.fancybox.js?v=2.1.3"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/js/source/jquery.fancybox.css?v=2.1.2" media="screen" /&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="common/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /&gt;
      &lt;script type="text/javascript" src="common/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $("a#single_image").fancybox();
          })
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;
              &lt;div class="mast"&gt;Mighty Wash&lt;/div&gt;
              &lt;div class="navigation"&gt;
                  &lt;?=build_navigation();?&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;section id="main"&gt;
              &lt;a id="single_image" href="/common/img/barcode.gif"&gt;&lt;img src="common/img/barcode.gif" /&gt;&lt;/a&gt;
          &lt;/section&gt;
          &lt;footer&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, when I try to embed a google map into an iframe, I get nothing. It just navigates to a giant google map:</p>
  
  <pre><code>&lt;?php require_once('common/inc/default.php'); ?&gt;
      &lt;!DOCTYPE html&gt;
      &lt;head&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/css/default.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/css/typography.css" /&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Droid+Sans|Lobster' rel='stylesheet' type='text/css'&gt;
      &lt;!-- Add jQuery library --&gt;
      &lt;script type="text/javascript" src="common/js/lib/jquery-1.8.2.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Add fancyBox main JS and CSS files --&gt;
      &lt;script type="text/javascript" src="common/js/source/jquery.fancybox.js?v=2.1.3"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="common/js/source/jquery.fancybox.css?v=2.1.2" media="screen" /&gt;
  
      &lt;link rel="stylesheet" type="text/css" href="common/js/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" /&gt;
      &lt;script type="text/javascript" src="common/js/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
              $("a.iframe").fancybox();
          })
      &lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;
              &lt;div class="mast"&gt;Mighty Wash&lt;/div&gt;
              &lt;div class="navigation"&gt;
                  &lt;?=build_navigation();?&gt;
              &lt;/div&gt;
          &lt;/header&gt;
          &lt;section id="main"&gt;
              &lt;a class="iframe" href="http://maps.google.com/?output=embed&amp;f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&amp;hl=lv&amp;ll=51.504155,-0.117749&amp;spn=0.00571,0.016512&amp;sll=56.879635,24.603189&amp;sspn=10.280244,33.815918&amp;vpsrc=6&amp;hq=London+Eye&amp;radius=15000&amp;t=h&amp;z=17"&gt;Google maps (iframe)&lt;/a&gt;
          &lt;/section&gt;
          &lt;footer&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any Ideas?</p>