如何在Iframe中显示谷歌地图

How to display google map in Iframe

本文关键字：显示 谷歌地图 Iframe      更新时间：2023-09-26

我想在Razor MVC页面中显示谷歌地图，但它没有显示，并得到如下错误：

拒绝显示'https://maps.google.com/maps/ms?ie=UTF8&hl=en&msa＝0&msid=XXXXXXXXXXXXXX&ll=XXXXXXXXXX&spn=XXXXXXXXXX&output=embed，因为它将"X-frame-Options"设置为"SAMEORIGIN"。

代码如下：

<div id="map" style="width: 251px; height: 202px;">
  <iframe id="iGmap" width="251" height="202" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="
http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed">
  </iframe>
</div>

谷歌地图阻止外部网站将其嵌入iframe。这是一项针对他们的政策，所以你无法规避。如果你想在iframe中显示地图，你需要通过Google Maps Embed API（或他们的其他API之一）来实现。

我通过删除"ms？"实现了这一点从我的URL

http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed

至

http://maps.google.com/maps?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=XXXXXXXXXXXXXXXXXXXXX&amp;ll=XXXXXXXXXXXXXXXX&amp;spn=XXXXXXXXXXXXX&amp;output=embed

喜欢这个吗

<iframe src="https://www.google.com/maps/d/u/0/embed?mid=1-VlXsvMWMr8EotfMcIwYKt-1SrI" width="320" height="350" style="margin-top:-387px"></iframe>

让我知道它是否工作

所有地图嵌入API请求均免费提供，无限制使用

要在网页上创建嵌入式地图，您应该首先完成此链接中所需的设置步骤。

如果完成了第一步，现在可以将Maps-Embedneneneba API URL设置为iframe的src属性，如下所示：

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  referrerpolicy="no-referrer-when-downgrade"
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
  &q=Space+Needle,Seattle+WA">
</iframe>

希望这能有所帮助。

相关文章：