Javascript 在使用谷歌地图的方法之前先定义谷歌地图

我遵循谷歌地图api文档：

在init方法之前，定义USGSOverlay，它是google.maps.OverlayView（）的原型

我有一个单独的html文件和一个单独的javascript文件（Map.js），我在其中调用映射的init方法

  <div id="googleMap"></div>
  <script src="Map.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<YOURKEY>&callback=init"></script>

它正确地显示地图，但对于覆盖，它仍然抛出错误：google未定义。我缺少什么吗？

如果你看一下，他们不是异步加载API（使用“async defer”和回调函数），而是同步加载

要进行此更改，您的API包括：

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

var映射；
CustomImageOverly.prototype=新的google.maps.OverlayView（）；
函数initMap（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-34.397，
液化天然气：150.644
},
缩放：8
});
var bounds=new google.maps.LatLngBounds(
新google.maps.LatLng（62.281819，-150.287132），
新的google.maps.LatLng（62.400471，-150.005608））；
//这张照片是由美国地质调查局提供的。
var srcImage=https://developers.google.com/maps/documentation/javascript/';
srcImage+=“examples/full/images/talkeetna.png”；
覆盖=新自定义图像（边界、srcImage、地图）；
}
函数customImageOver（边界、图像、映射）{
this.bounds=bounds；
this.image=image；
this.map=map；
this.div=null；
这个.setMap（map）；
}
google.maps.event.addDomListener（窗口'load'，initMap）
html，
身体，
#地图{
身高：100%；
宽度：100%边距：0；
填充：0；
}
在googleapis脚本之后加载map.js

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


我尝试了文档，但仍然出现错误。我在问题中添加了更多信息。
callback=init
&
callback=initMap
-哪个是正确的？你应该把任何谷歌地图代码放在你正在使用的（右）回调函数中。谢谢，它起作用了。只是想补充一点，在google api以html形式添加之后，我需要添加我的map.js。其次，我认为您的谷歌api密钥仍然存在于答案中，可能会删除它。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap"
async defer></script>   

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY"></script>   

google.maps.event.addDomListener(window, 'load', initMap);

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