Magnific Popup - Google Maps Embed API 必须在 iframe 中使用答案

【问题标题】：Magnific Popup - Google Maps Embed API must be used in an iframeMagnific Popup - Google Maps Embed API 必须在 iframe 中使用
【发布时间】：2016-01-17 14:29:10
【问题描述】：

无法在 Chrome 移动设备上运行 Google 地图的宏伟弹出窗口。触发时，我得到“Google Maps Embed API must be used in an iframe”。

它与 Magnific 示例中给出的 Google 地图 URL 完美配合，但当我使用我自己的时，我不确定 Google 是否更改了他们的 URL 结构，但看起来新的“嵌入”URL 导致问题。

这是我正在使用的 URL 类型的示例：https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2382.9841570555454!2d-6.227123684388949!3d53.32563697997466!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48670ec57aa7b09d%3A0x7965235d57af13f!2sClayton+Hotel+Ballsbridge!5e0!3m2!1sen!2sie!4v1453039698107

有没有办法可以将此 URL 更改为更像示例中给出的工作 URL 结构？：https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&hl=en&t=v&hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom

一直在为这个问题绞尽脑汁......任何帮助将不胜感激！

谢谢！

大卫

【问题讨论】：

标签： magnific-popup

【解决方案1】：

我也注意到了这一点。这是因为 Magnific Popup 使用“maps.google”。而谷歌现在使用“www.google.”。我有这个没有用

https://www.google.co.uk/maps/place/Leathermarket+Gardens

我把它改成了

https://maps.google.com/maps?q=Leathermarket+Gardens

现在有效。

希望能有所帮助。

【讨论】：

【解决方案2】：

Google 地图应该嵌入到 Magnific pop 插件的 iframe 中

示例：

<a href="https://maps.google.com/maps?q=221B+Baker+Street,+London,+United+Kingdom&amp;hl=en&amp;t=v&amp;hnear=221B+Baker+St,+London+NW1+6XE,+United+Kingdom" data-lightbox="iframe">View map</a>

【讨论】：

【解决方案3】：

因为此处未列出正确的解决方案。您唯一需要做的就是删除此属性：disableOn: 700。

只保留下面的代码：

$('.popup-gmaps').magnificPopup({
    disableOn: 700,
    type: 'iframe',
    mainClass: 'mp-fade',
    removalDelay: 160,
    preloader: false,
    fixedContentPos: false
});

然后它会再次工作。

PS：如果您想保留新的 Google URL 地址表单，您应该将 jquery.magnific-popup.js 库中的代码更改为：

     gmaps: {
                index: '//maps.google.',
                src: '%id%&output=embed'
            }

到：

     gmaps: {
                index: 'google.com/maps/',
                src: '%id%'
            }

【讨论】：