html - 谷歌地图嵌入禁用用户控件

Question

我正在尝试使用 maps.google.com 上的嵌入功能向我的网站添加一个简单的谷歌地图。

这是为我生成的代码：

<iframe src="https://www.google.com/maps/embed?pb=!1m12!1m8!1m3!1d2391.716465442018!2d-0.6309220000000001!3d53.169126500000004!3m2!1i1024!2i768!4f13.1!2m1!1sAqua+House%2C+Lincoln+Enterprise+Park%2C+Newark+Road%2C+Lincoln%2C+LN5+9FP!5e0!3m2!1sen!2suk!4v1418907912180" width="100%" height="410" frameborder="0" style="border:0"></iframe>

我不知道如何禁用用户控件，这样如果他们不小心向下滚动地图，它就不会放大负载。

Answer 1

我认为您对 iframe 没有太多控制权。最好的选择是使用 Google Maps JavaScript API v3 并设置disableDefaultUI: true

Answer 2

也许我这样做很糟糕，但我想要嵌入的简单性，但也没有控件：

只需将 iframe 放大两倍并隐藏溢出，问题就解决了。

如果有人能看到这个问题，我很好奇......

div.map-container {
  position: relative;
  overflow: hidden;
  min-height: 500px;
  width: 100%;
}
iframe.map {
  width: 200%;
  height: 150%;
  position: absolute;
  bottom: -25%;
  left: -50%;
}

<div class="map-container">
  <iframe class="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2689.289359274373!2d-122.35146608361184!3d47.62050627918564!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x5490151f4ed5b7f9%3A0xdb2ba8689ed0920d!2sSpace+Needle!5e0!3m2!1sen!2sus!4v1478295713465" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

编辑：稍微误读了 OP。您可以在地图顶部覆盖一个 div，并且该位置的任何交互都将与 div 交互，而不是与地图本身交互。

没有玩过它，但你也可以给 iframe 一个：

pointer-events: none;

可能不适用于所有浏览器；但这是一条你可以探索的道路。

Answer 3

尝试在 get-parameters 中添加选项signed_in=false 如果使用 js-api，它可以工作：

<script>
    // Google map
    function initMap() {

      var map = new google.maps.Map(document.getElementById('map2'), {
        zoom: 17,
        center: {lat: <lat>, lng: <lng>},
        scrollwheel: false,
          disableDefaultUI: true,
      });
      var image = 'images/map-icon.png';
      var marker = new google.maps.Marker({
        position: {lat: <lat>, lng: <lng>},
        map: map,
        icon: image,
        title: 'Hello World!'
      });
    }
</script>
<script async defer
     src="https://maps.googleapis.com/maps/api/js?signed_in=false&callback=initMap">
</script>