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

Question

Google 地图的华丽弹出窗口无法在 Chrome 移动设备上运行。触发时我得到 "Google Maps Embed API must be used in an iframe".

它与 Magnific 示例中给出的 Google 地图 URL 完美配合，但当我使用自己的地图时却不行，我不确定 Google 是否更改了他们的 URL 结构，但看起来新的 "embeded" 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

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

谢谢！

大卫

Answer 1

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

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

我把它改成了

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

现在有效。

希望对您有所帮助。

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

Answer 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%'
            }

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

Magnific Popup - Google Maps Embed API must be used in an iframe

magnific-popup