javascript - Google Maps API 如何在 iframe 中隐藏 UI

Question

我得到了我的 API key ，并像这样构造了我的嵌入代码:

<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 的默认用户界面。 Google 的文档为我提供了这段代码:

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

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

令我困惑的是，这段代码试图再次创建 map ，但我的代码已经显示为 <iframe>上面的标记。我试过添加 map-canvas id 到我的 iframe，但脚本不会影响它。

Answer 1

您可以通过在 html 中添加空 div 来简单地创建 map :

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

然后就可以通过JS初始化了:

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);

通过JS初始化 map 时无需添加iframe。

如果您希望完全禁用 Google map 用户界面，请查看:https://developers.google.com/maps/documentation/javascript/examples/control-disableUI

jsbin-http://jsbin.com/kudixegayo/1/edit?html,css,js,output