Search code examples
magnific-popup

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


Magnific pop up for Google Maps not working on Chrome mobile. When triggered I get "Google Maps Embed API must be used in an iframe".

It works perfectly with the Google Maps URL given in the Magnific example but not when I use my own, I'm not sure if Google have changed their URL structure since but it looks like the new "embeded" URL is causing the problem.

Here's an example of the kind of URL I'm using: 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

Is there a way I can change this URL to more like the working URL structure given in the example?: 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

Been wracking my brains with this one....any help would be greatly appreciated!

Thanks!

David


Solution

  • I noticed this too. It's because Magnific Popup uses "maps.google." whereas Google now uses "www.google.". I had this which didn't work

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

    and I changed it to

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

    Which now works.

    Hope that helps a little.