Javascript 谷歌地图可以'；t读取属性'；扩展'；页面加载后未定义的

我试图通过在页面加载两秒钟后加载我的谷歌地图来提高页面速度。在这样做的同时，我不断得到“无法读取未定义的属性‘extend’”。我知道有一些异步加载正在进行，但我不知道如何在页面完成2秒后以正确的顺序加载此映射。非常感谢您的帮助

页面代码：

<div id="mapCont"></div>
<script defer type='text/javascript' src='/js/maps.js'></script>

maps.js

$(window).bind("load", function() { 
    $.getScript('https://maps.googleapis.com/maps/api/js?key=key', function()
{

    setTimeout(function(){ 
        function doMap(callback) {
            $("#mapCont").html('<div id="mapInfoManual" class="searchMap mb5"></div>');
        callback();
        }
        
        doMap(function() {

        initialize();
          
         var map = null;
         var markers = [];
         var openedInfoWindow ="";
         var bounds = new google.maps.LatLngBounds();
   
         function initialize() {
   
             var mapOptions = {
   
              zoom: 8,
               center: new google.maps.LatLng(64.85599578876611, -147.83363628361917),
               mapTypeId: google.maps.MapTypeId.ROADMAP,
               mapTypeControl: true,
               mapTypeControlOptions: {
                 style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
               },
               zoomControl: true,
               zoomControlOptions: {
                   style: google.maps.ZoomControlStyle.SMALL
               }
             };
             map = new google.maps.Map(document.getElementById("mapInfoManual"),
                 mapOptions);
   
   
             google.maps.event.addListener(map, 'zoom_changed', function() {
                 zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) {
                     if (this.getZoom() > 20) // Change max/min zoom here
                         this.setZoom(18);
   
                     google.maps.event.removeListener(zoomChangeBoundsListener);
                 });
         });
             addMarker();
           }
   
   
         function addMarker() {
   
               var bounds = new google.maps.LatLngBounds();
               for (i = 0; i < markersArray.length; i++) {
                 CodeAddress(markersArray[i]);
               }
             }
   
             // Address To Marker
             function CodeAddress(markerEntry) {
             var mytitle = (markersArray[i]['title']);
                     var myaddress = (markersArray[i]['address']);
                     var linkid = (markersArray[i]['linkid']);
                     var linkurl = (markersArray[i]['linkurl']);
                   var image = { url: '/images/MapPin.png', };
             var lat = markerEntry['lat'];
             var long = markerEntry['long'];
             // var myLatLng = {lat: markerEntry['lat'], lng: markerEntry['long']};
             var myLatlng = new google.maps.LatLng(parseFloat(lat),parseFloat(long));
   
                     var marker = new google.maps.Marker({
                       position: myLatlng,
                       map: map,
                       icon: image
                     });
                     bounds.extend(marker.getPosition());
                     var infoWindowContent = "<div class='cityMapInfoPop'><span style='font-weight:700;'>"+ mytitle +"</span><br /><br />" + myaddress + "<br /><br /><a href='/center/" + linkurl + "/'>More Details</a></div>";
                     openInfoWindow(marker, infoWindowContent);
                     markers.push(marker);
                     map.fitBounds(bounds);
               }
               //Info Window
   
             function openInfoWindow(marker, infoWindowContent) {
               var infowindow = new google.maps.InfoWindow({
                 content: '<div class="cityMapInfoPop">' + infoWindowContent + '</div>'
               });
   
               google.maps.event.addListener(marker, 'click', function() {
   
                 if (openedInfoWindow != "") {
                   openedInfoWindow.close();
                 }
   
                 infowindow.open(map, marker);
                 openedInfoWindow = infowindow;
               });
             }
   
    });
    }, 2000);
});

});

$（窗口）.bind（“加载”，函数（）{
$.getScript（'https://maps.googleapis.com/maps/api/js?key=key，函数（）
{
setTimeout（函数（）{
函数doMap（回调）{
$（“#mapCont”）.html（“”）；
回调（）；
}
doMap（函数（）{
初始化（）；
var-map=null；
var标记=[]；
var openedinfown=“”；
var bounds=new google.maps.LatLngBounds（）；
函数初始化（）{
变量映射选项={
缩放：8，
中心：新google.maps.LatLng（64.85599578876611，-147.833628361917），
mapTypeId:google.maps.mapTypeId.ROADMAP，
mapTypeControl:true，
mapTypeControlOptions：{
样式：google.maps.MapTypeControlStyle.DROPDOWN_菜单
},
动物控制：对，
ZoomControl选项：{
样式：google.maps.ZoomControlStyle.SMALL
}
};
map=new google.maps.map（document.getElementById（“MapInfo手动”），
地图选项）；
google.maps.event.addListener（映射'zoom_changed'，函数（）{
zoomChangeBoundsListener=google.maps.event.addListener（映射，'bounds_changed'，函数（事件）{
if（this.getZoom（）>20）//在此处更改最大/最小缩放
这是setZoom（18）；
google.maps.event.removeListener（zoomChangeBoundsListener）；
});
});
addMarker（）；
}
函数addMarker（）{
var bounds=new google.maps.LatLngBounds（）；
对于（i=0；i
“+myaddress+”

”；
openInfoWindow（标记、infoWindowContent）；
标记器。推（标记器）；
映射边界（bounds）；
}
//信息窗口
函数openInfoWindow（标记，infoWindowContent）{
var infowindow=new google.maps.infowindow({
内容：“”+infoWindowContent+“”
});
google.maps.event.addListener（标记'click'，函数（）{
如果（openedinfoowindow！=“”）{
openedinfown.close（）；
}
信息窗口。打开（地图、标记）；
openedinfown=信息窗口；
});
}
});
}, 2000);
});
});

首字母

https://maps.googleapis.com/maps/api/js?key=key

加载实现未捕获的其他脚本。该软件包启用以下模式，可能就是您想要的：

从'@googlemaps/js-api-Loader'导入{Loader}；
常量加载器=新加载器({
apiKey:“，
版本：“每周”，
图书馆：[“地点”]
});
装载机
.load（）
.然后（（）=>{
doMap（）；
初始化（）；
})
.catch（e=>{
//做点什么
});

如果需要JQuery和现有模式，可以选择（使用回调）：

window.callback=（）=>{
doMap（）；
初始化（）；
};
$（窗口）.bind（“加载”，函数（）{
$.getScript（'https://maps.googleapis.com/maps/api/js?key=key&callback=callback“，（）=>{}）；//在这里什么也不做

---

同样相关：

非常好，谢谢您的帮助！