我正在使用嵌入谷歌地图在具有特定位置的特定页面上呈现具有动态位置的地图。iframe 包含 google 嵌入地图的 url，带有q=检索位置的参数。例如像这样：
<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>
通常它渲染得很好，就像这里：
但奇怪的是，有时在同一个浏览器上，它呈现的相同硬件就像没有提供地址一样：
我所观察到的 - 它似乎与不同的网络有关（但与网络速度无关） - 例如，我可以使用家庭 wifi 很好地查看地图，但是当我切换到我的办公室网络或移动设备时（对于例如使用个人热点和蜂窝网络）会发生问题。
发生此问题时，iframe src 与不存在时相同。但是 iframe 的内容会发生变化。
如何处理这个问题？
谢谢
有一个相当简单的解决方案。它与 Google API 密钥有关。如果您想在您的网站上嵌入您的位置，我建议您使用 Google 地图提供的嵌入功能。
简单的做如下：
在 Google 地图 > 分享 > 嵌入地图中输入您的位置。
你最终会得到这样的代码：
<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>
您还可以通过在嵌入地图之前滚动来确定您将在嵌入的 Google 地图中看到的内容。
希望这可以帮助！