嵌入式Google地图未以特定网络上的位置为中心

Question

I'm using embed google maps for rendering map with dynamic location on specific page with specific location. Iframe contains url to google embed map with q= parameter to retrieve location. For example like this:

<iframe height="200" frameborder="0" style="border:0; width:100%;" src="https://www.google.com/maps/embed/v1/place?key=GOOGLE_API_KEY_HERE&q=Fabryczna+20A,+Kraków,+Poland" allowfullscreen></iframe>

Usually it renders just fine, like here:

But what is weird, sometimes on same browser, same hardware it renders like there would be no address provided:

What I've observed - it seems to be related to different networks (but not network speed) - so for example I was able to view map just fine using my home wifi, but when I switched to my office network, or mobile (for example using personal hotspot and cellular network) issue would occur.

When this issue occurs iframe src is the same as when it's not present. But the content of an iframe changes.

How to deal with this issue?

Thanks

Answer 1

There is a fairly simple solution for this. It has to do with the Google API key. If you would like to embed your location on your website I recommend using the embed function Google Maps has to offer.

Simple do as followed:

Type in your location in Google Maps > Share > Embed Map.

You will end up with a code like this:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2488.201651849343!2d19.975045070729283!3d50.06547331892074!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47165b28caac7d19%3A0xbd9f87d30b21ac38!2sFabryczna+20A%2C+Krak%C3%B3w%2C+Poland!5e0!3m2!1sen!2snl!4v1510144269138" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

You can also determine what you will see in your embedded Google Maps by scrolling before you embed the map.

Hope this helps!