javascript - Google Maps basic embed doesn't work on mobiles

Question

I'm making simple website and I want google map there. I need dynamic map with one localization mark. I didn't want to use google API, because I read that key is limited use. So I used google maps "share" option. It works fine on desktop everytime, but it only works sometimes on mobiles. Does somebody know why? Here's the code:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1240.111699850084!2d21.838264!3d51.564138!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47189c715ab7a54b%3A0x9563a208da50b7d3!2sKrzywa%204A%2C%2008-530%20D%C4%99blin!5e0!3m2!1spl!2spl!4v1614375043434!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

mobile

desktop

标签： javascripthtml

Answer 1

Sounds like a lame thing to say, but it works on my machine.

Check this on your mobile, made reproduction: https://jsfiddle.net/soqj3f6z/

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1240.111699850084!2d21.838264!3d51.564138!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47189c715ab7a54b%3A0x9563a208da50b7d3!2sKrzywa%204A%2C%2008-530%20D%C4%99blin!5e0!3m2!1spl!2spl!4v1614375043434!5m2!1spl!2spl" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

It looks like you served your website locally on a desktop and then it works but when you open it on your mobile reaching your desktop via local IP it is not considered safe anymore and thus the script from other domain gets blocked. (Read about what CORS /CSP is).

To make some tests confirming my guess: try to open this url from another desktop and check the console for errors. Or try to deploy it to any server with SSL (https) so the Google maps still thinks it's embedded in a safe context.

Jsfiddle has SSL and thus google maps allows being embedded there.