谷歌地图与fancybox集成

Google Maps integrated with fancybox

本文关键字：集成 fancybox 谷歌地图      更新时间：2024-04-25

有人能告诉我为什么谷歌地图在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>

我想也许我的谷歌地图url是错误的，fancybox运行良好，只是地图没有从谷歌地图加载。

当你从谷歌共享地图时，你实际上应该得到第二个链接（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

相关文章：