在HTML中设置ng-init=init() 在控制器中 使用美元的范围。Init = function(){…} 而不是google。maps。event。addDomListener(window， "load"， init){…}

希望这对你有所帮助。

为了解决这个问题，你需要在脚本中添加async defer。

应该是这样的:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
    async defer></script>

在这里可以看到async defer的含义。

因为你将从主js文件中调用一个函数，你还想确保它在你加载主脚本的那个文件之后。

如果在循环中创建多个映射，如果单个映射DOM元素不存在，则会破坏所有映射。首先，在创建新的Map对象之前，检查以确保DOM元素存在。

[...]

for( var i = 0; i <= self.multiple_maps; i++ ) {

  var map_element = document.getElementById( 'map' + '-' + i.toString() );

  // Element doesn't exist, don't create map!
  if( null === map_element ) {
    continue;
  }

  var map = new google.maps.Map( map_element, myOptions);
}

[...]

这样我就把失败的情况加进去了。我有一个<div id="map>，其中我正在加载地图:

var map = new google.maps.Map(document.getElementById("map"), myOptions);

div最初是隐藏的，它没有明确设置宽度和高度值，所以它的大小是宽度x 0。一旦我像这样在CSS中设置了这个div的大小

#map {
    width: 500px;
    height: 300px;
}

一切工作!希望这能帮助到一些人。

对于更多可能仍然有这个问题的人，我使用了一个自关闭的<div id="map1" />标签，第二个div没有显示，似乎不在dom中。只要我把它改成两个打开和关闭标签<div id="map1"></div>它就工作了。hth

这个问题通常是由于地图div在需要访问它的javascript运行之前没有被渲染。

您应该将初始化代码放在onload函数内或HTML文件的底部，就在标记之前，这样DOM在执行之前就会完全呈现(注意，第二个选项对无效HTML更敏感)。

注意，正如matthewsheets指出的那样，这也可能是由于div的id在你的HTML中根本不存在(div不被渲染的病态情况)

从wf9a5m75的帖子中添加代码样本，将所有内容放在一个地方:

<script type="text/javascript">

function initialize() {
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
        zoom: 8,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
}
google.maps.event.addDomListener(window, "load", initialize);

</script>