禁用点击嵌入式谷歌地图中的标记答案

【问题标题】：Disable click on markers in embedded Google map禁用点击嵌入式谷歌地图中的标记
【发布时间】：2016-04-26 13:52:08
【问题描述】：

我有一个嵌入式 Google 地图，它的 CSS top 位置已调整为隐藏顶部栏，因为它无法通过 API 禁用（至少我无法找到对此的任何引用）。问题是通过偏移地图，点击地图标记会隐藏“返回地图”按钮，因此无法返回地图。是否可以禁用单击标记以绕过此问题？

原图：https://www.google.com/maps/d/u/0/viewer?mid=z5HTkcVjHLGw.k95PWTPXBYQ8

iframe：

<iframe src="//www.google.com/maps/d/embed?mid=z5HTkcVjHLGw.k95PWTPXBYQ8&amp;z=6" width="300" height="240"></iframe>

演示https://jsfiddle.net/91123ao1/1/

【问题讨论】：

您尝试执行的操作似乎违反了 Google 地图的权限：" 虽然我们鼓励使用注释，但您不得显着改变 Google 地图、Google 地球或街景在网上的外观。例如，您不得对产品界面的颜色进行任何更改或更改图像的显示方式（例如添加云或其他自然元素、模糊等）。 "来自google.com/permissions/geoguidelines.html
如果你还真的想做，还需要保留小地图的缩放功能吗？
您的意思是在地图上放置一个叠加层？那也会禁止四处走动。我必须咨询项目经理:)
是的，我就是这么想的。我在你的小提琴中尝试了document.getElementById('offset').contentWindow.click = function(a) { console.log(a);}，但它引发了一个安全错误：VM352:59 Uncaught SecurityError: Blocked a frame with origin "fiddle.jshell.net" from access a frame with origin "google.com".协议、域和端口必须匹配。
感谢您的想法，我会再四处寻找

标签： javascript css google-maps google-maps-api-3

【解决方案1】：

嗯，这样做的唯一方法（据我所知）是编辑 Google 地图的实际 HTML，由于版权问题，这是非常非法的。因此，您可以在 iframe 下方添加 <button>，如下所示：

<div id = "map">
    <iframe src="//www.google.com/maps/d/embed?mid=z5HTkcVjHLGw.k95PWTPXBYQ8&amp;z=6" width="300" height="240"></iframe>
</div>
<br>
<button onclick = "backToMap()">Back to map</button>

对于 HTML 端，和

function backToMap() {
    window.location = "https://jsfiddle.net/91123ao1/1/#map"
}

对于 JavaScript 方面。我认为这会奏效，但可能不会。

【讨论】：