改变ID(在所有3个地方)从“map-canvas”到“map”为我修复了它，即使我已经确保ID是相同的，div有宽度和高度，代码直到窗口加载调用后才运行。不是破折号;除了“map”，它似乎不能与任何其他ID一起工作。

实际上最简单的方法来解决这个问题，只是移动你的对象之前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>

确保在第一次加载API时包含了Places库&libraries= Places参数。

例如:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

如果在循环中创建多个映射，如果单个映射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);
}

[...]

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

应该是这样的:

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

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

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

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

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