谷歌地图与fancybox集成答案

【问题标题】：Google Maps integrated with fancybox谷歌地图与fancybox集成
【发布时间】：2013-12-08 16:53:57
【问题描述】：

有人可以请我理解为什么谷歌地图在fancybox中不起作用吗？我在下面包含了我的代码。

我的 JS

var fbCloseTitle = "close",
fbNextTitle = "next",
fbPrevTitle = "previous";$(".fancybox").fancybox({
width: '90%',
height: '90%',
fixed: false,
autoSize: false,
autoCenter: true,
tpl: {
    closeBtn: '<div title="' + fbCloseTitle + '" class="fancybox-item fancybox-close"></div>',
    next: '<a title="' + fbNextTitle + '" class="fancybox-item fancybox-next"><span></span></a>',
    prev: '<a title="' + fbPrevTitle + '" class="fancybox-item fancybox-prev"><span></span></a>'
}});

我的 HTML

<div class="cul center apear floatL">

 <div class="verticalLine"></div>
    <figure class="diamond relative"> <a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big%20smile%20creative+Cambridge,+UK"><img class="centerAbsolute" src="img/diamond04.jpg" alt="Graphic Design In Cambridge"></a></figure>
    <h2 class="proximaBold">we work in the heart of cambridge!</h2>
    <div class="line"></div>
    <p>We are very proud of our city and we try to provide a good, honest, local service that the businesses of Cambridge can rely on. You deserve it!</p>
  </div>

我想我的谷歌地图网址可能是错误的，fancybox 工作正常，只是地图没有从谷歌地图加载。

【问题讨论】：

标签： javascript jquery google-maps maps fancybox

【解决方案1】：

当您从 Google 分享地图时，您实际上应该获取第二个链接（iframe 标签）粘贴 HTML 以嵌入网站，然后提取 iframe 的 src 属性的值并在你的主播的href 中使用它

<a class="fancybox fancybox.iframe" href="https://maps.google.com/maps?q=big+smile+creative+Cambridge,+UK&amp;ie=UTF8&amp;hq=big+smile+creative&amp;hnear=Cambridge,+United+Kingdom&amp;ll=52.205336,0.121817&amp;spn=0.027297,0.084543&amp;t=m&amp;z=14&amp;iwloc=A&amp;cid=16361723521191055041&amp;output=embed">google map</a>

然后，在您的 fancybox 脚本中，我建议您禁用 iframe preload 以避免一些已知问题，例如地图偏离中心：

$(".fancybox").fancybox({
    iframe: {
        preload: false
    }
});

见JSFIDDLE

【讨论】：