谷歌在样例中使用id="map_canvas"和id="map-canvas"，反复检查id:D

这是对之前删除的帖子的编辑，以包含链接的答案的内容，在答案本身。重新发布这个答案的目的是作为React 0.9+用户的一个PSA，他们也遇到了这个问题。

编辑原文

在使用ReactJS时也得到了这个错误，同时遵循这篇博客文章。萨哈特的评论在这里有所帮助 请看下面sahat的评论内容。

❗️注意React >= 0.9 在v0.9之前，DOM节点是作为最后一个参数传入的。如果您正在使用它，您仍然可以通过调用this. getdomnode()访问DOM节点。 换句话说，在React的最新版本中，用this.getDOMNode()替换rootNode参数。

Year, geocodezip的答案是正确的。 所以像这样修改代码: (如果你还是有麻烦，或者将来可能是别人)

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

这个问题通常是由于地图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>

在map API键调用的开始添加async defer。

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

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

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

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

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