Javascript Google Maps API如何在iframe中隐藏UI

我得到了API密钥，并构建了嵌入代码，如下所示：

<iframe
    id="map-canvas"
    width="450"
    height="250"
    frameborder="0" style="border:0"
    src="https://www.google.com/maps/embed/v1/view?key=MYKEY&center=LAT,LNG&zoom=12&maptype=roadmap" allowfullscreen>
</iframe>

---

让我困惑的是，这段代码试图再次创建映射，但我的代码已经显示为上面的

标记。我已尝试将

map canvas

id添加到我的iframe中，但脚本不会影响它。

只需在html中添加空div即可创建地图：

<div id="map-canvas"></div>

在通过JS初始化映射时，不需要添加iframe

如果您希望完全禁用Google地图用户界面，请查看以下内容：

---

jsbin-

您似乎混淆了谷歌地图JavaScript API和谷歌地图嵌入API。如果你想控制地图的外观，你必须使用JSAPI；按照此操作。

控制台中是否有错误？你能做一个JSFIDLE吗？你能把HTML中的脚本改成：

其中API\u键是你从google得到的键，看看它是否有效吗？我做了。它说API密钥无效或者不允许JSFIDLE iisn访问映射。但是它应该能够。这是一个JSFIDLE的东西，可以在jsbin中找到：

<div id="map-canvas"></div>

function initialize() {
  var mapOptions = {
    zoom: 4,
    center: new google.maps.LatLng(-33, 151),
    disableDefaultUI: true
  };

  // Create new map object (gets element by id #map-canvas)
  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);