Javascript GoogleMaps API在html文件中工作，但不在JS文件中工作

我正在使用我在谷歌文档中找到的示例：

我刚刚复制/粘贴了hello world代码，它工作正常：它在指定位置向我显示地图。但是现在我希望能够在JS文件中的这个映射中工作，以获得更可读的作品，所以我只是在

之前添加了

。 此文件包含与

中找到的方法完全相同的方法：

---

所以它应该什么也不做，但我有一个

参考错误：谷歌没有定义
。在JS文件中使用API缺少什么
 您需要将地图显示的js代码放入类似initMap（）的回调函数中，并在google maps脚本源中添加回调函数的名称

HTML代码：

  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

啊，好的，错过了回调的部分。谢谢
  <div id="map" style="width: 500px; height: 400px;"></div>
      <script async defer
            src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}