Javascript 谷歌没有定义谷歌地图

我正在尝试从google.maps.Map对象扩展我的原型函数。但是我得到了undefined的不能读取属性'firstChild'

基本上，我只想添加一个自定义原型对象，它也是google.maps的一个实例。下面是我的代码

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

function Map(id, options) {
    this.id = id;
    this.latlng = options.center;
}

Map.prototype = new google.maps.Map;

function initMap()
{
    map = new Map('map', mapOptions);
}

功能映射（id、选项）{
this.id=id；
this.latlng=options.center；
}
Map.prototype=new google.maps.Map；
函数initMap（）
{
地图=新地图（“地图”，地图选项）；
}

这是我得到的错误

---

所以我喜欢的是当我运行“new Map（'Map'，mapOptions'）时，这将创建一个新的google.maps.Map（）；实例，这将渲染贴图。但我不确定我在这里遗漏了什么，因为我对在javascript中使用原型相当陌生。希望你能帮我。谢谢

您现在遇到的错误是由于脚本标记上的async和defer属性造成的，请查看此处

---

在注释“我试图删除异步和延迟，但新错误为找不到'firstchild'”后更新

由于GoogleMapsAPI密钥，以下代码片段只能在W3Twit编辑器中使用

更新以使用继承

我的第一张谷歌地图
功能映射（id、选项）{
var元素=document.getElementById（id）；
//调用超类的构造函数来初始化超类派生成员。
google.maps.Map.call（this，element，options）；
this.id=id；
this.latlng=options.center；
this.customAddMarkerAtCenter=函数（）{
返回新的google.maps.Marker({
职位：本公司，
地图：地图，
标题：“你好，世界！”
});
}
}
Map.prototype=Object.create（google.maps.Map.prototype）；
Map.prototype.constructor=Map；
函数initMap（）
{
地图=新地图（“谷歌地图”{
中心：新google.maps.LatLng（51.508742，-0.120850），
缩放：5
}，“mapId”）；
map.customAddMarkerAtCenter（）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（50.508742，-0.120850），
地图：地图，
标题：“你好，世界！”
});
警报（map.id）
警报（map.latlng）
}
initMap（）；

我尝试删除async和defer，但出现了一个新错误，即找不到“firstchild”。是的，但这是另一个错误，我已解决了您的问题，我将使用您的方法更新我的答案，但仍然相同。另外，我想让新的地图原型的行为就像google.maps.Map对象一样。简言之，我希望它继承google.maps.Map对象没有运气的所有内容仍然是相同的您使用的浏览器是什么？