Question

Google地图的Magnific弹出窗口无法在Chrome移动设备上运行。触发后，我得到“必须在iframe中使用Google Maps Embed API”。

它与Magnific示例中提供的Google Maps URL完美配合，但在我使用自己的URL时却没有，我不确定Google是否更改了其网址结构，但看起来新的“嵌入”网址导致了问题。

以下是我正在使用的网址示例：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

有没有办法可以将此网址更改为更像示例中给出的工作网址结构？：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 - 必须在iframe中使用Google Maps Embed API

3 个答案: