“Google嵌入API必须在iframe中使用。”

Question

我正在尝试将谷歌地图嵌入到iFrame中(在我的页面上弹出)。当我远程查看它时，它工作得非常完美，但一旦我将它“激活”，它就会给我一个错误：“必须在iframe中使用Google嵌入API”。这似乎是我的一个链接不起作用，但我已经检查了一切，似乎找不到任何东西。任何帮助都将不胜感激！这是我的代码：

 <!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>

Answer 1

fancyapps.com不是CDN，当您从when服务器请求两个文件(js+css)时，它们不会传递这些文件。

将文件上载到您自己的服务器或从CDN加载它们(例如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" />