Question

我获得了我的API密钥，并构建了我的嵌入代码：

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

到目前为止一切顺利。现在，我正在尝试隐藏地图的默认用户界面。我通过Google的文档给出了这段代码：

<iframe>

令我困惑的是，此代码正在尝试再次创建地图，但我的上面已经显示了map-canvas标记。我已尝试将db.collection('images').find() ID添加到我的iframe中，但脚本也不会影响它。

Answer 1

您可以通过在html中添加空div来创建地图：

<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初始化地图时无需添加iframe。

如果您希望完全停用Google地图用户界面，请查看以下内容：https://developers.google.com/maps/documentation/javascript/examples/control-disableUI

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

Answer 2

您似乎将Google Maps JavaScript API与Google Maps Embed API混淆。如果您想控制地图的外观，您必须使用JS API;请遵循此simple example。

Google Maps API如何在iframe中隐藏UI

2 个答案: