这里的问题是API链接没有关键参数:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

这种方法很好。

实际上最简单的方法来解决这个问题，只是移动你的对象之前Javascript代码，它对我有用。我猜在你的答案对象是加载后javascript代码。

<style type="text/css" >
      #map_canvas {
              width:300px;
            height:300px;
     }

 <div id="map_canvas"> </div> // Here 

<script type="text/javascript">

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

</script>

<div id="map_canvas"> </div>

对于其他可能仍然存在这个问题的人来说，即使在尝试了上述建议之后，在初始化函数中对地图画布使用错误的选择器也会导致同样的问题，因为该函数试图访问不存在的东西。仔细检查你的map Id是否匹配你的初始化函数和HTML，否则同样的错误可能会被抛出。

换句话说，确保您的id匹配。；）

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

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

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

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

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

在我处理的一个案例中，地图div是有条件地呈现的，这取决于位置是否被公开。如果你不能确定是否地图画布div将在页面上，只需检查你的文档。getElementById返回一个元素，只在它存在时调用映射:

var mapEle = document.getElementById("map_canvas");
if (mapEle) {
    map = new google.maps.Map(mapEle, myOptions);
}

这里的问题是API链接没有关键参数:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=places&key=YOURKEY"></script>

这种方法很好。