Search code examples
javascriptgoogle-mapsiframegoogle-maps-embed

"The Google Maps Embed API must be used in an iframe."

I am trying to embed a Google Maps in an iFrame (as a pop up on my page). It works perfectly when I view it remotely, but as soon as I make it "live" it gives me the error "The Google Maps Embed API must be used in an iframe". It would seem like one of my links isn't working, but I have checked everything and can't seem to find anything. Any help would be greatly appreciated! Here is my code:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-     strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
<title></title>
<link rel="stylesheet" href="menu_style.css" type="text/css" />


 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <script type="text/javascript" src="http://fancyapps.com/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
 <link rel="stylesheet" type="text/css" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />

 <script type="text/javascript">
 $(document).ready(function() {
    $(".google_iframe").fancybox({
        'width'             : '75%',
        'height'            : '75%',
        'autoScale'         : false,
        'transitionIn'      : 'none',
        'transitionOut'     : 'none',
        'type'              : 'iframe'
    });
});

 </script>

 </head>
 <body>

  <p>If you would like directions / to view this on a map, please click <a class="google_iframe" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3321.2500604451925!2d-117.99007100000004!3d33.650681999999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80dd2111f91606ff%3A0xb1395267ce8b8e5c!2sHyatt+Regency+Huntington+Beach+Resort+and+Spa!5e0!3m2!1sen!2sus!4v1395732654186">here</a>.</p>

 </body>
 </html>
Solution

  • fancyapps.com is not a CDN, when you request the both files(js+css) from a webserver they don't deliver the files.

    Upload the files to your own server or load them from a CDN(e.g. cloudflare): 

     <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
 <link rel="stylesheet" type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen" />