Javascript Google maps v3 API仅在刷新/身份验证后加载速度非常慢

使用谷歌地图v3api。当我使用地图访问页面时，有时会出现以下错误：

“custom.js:46 uncaughtreferenceerror:google未定义”

已在密钥上启用API：

• 谷歌地图方向API
• 谷歌地图距离矩阵API
• 谷歌地图高程API
• 谷歌地图地理编码API
• 谷歌地图JavaScript API

当我重新加载页面时，一切正常。这并不是百分之百的有效。在某些情况下需要多次重新加载

我确实注意到，当地图加载不正确时，此脚本将在我的头标记中运行：

<script type="text/javascript" charset="UTF-8" src="https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttp%3A%2F%2Fmayan-co.com%2Fen%2Foutlets&amp;MYKEY&amp;callback=_xdc_._h7cv8d&amp;token=60166"></script>

10-20秒后，该脚本消失，当我在该脚本消失后刷新页面时，我的地图工作正常

我尝试过但没有结果的事情：

• 将脚本加载到页脚中的API
• 不使用异步或延迟
• 将特定url添加到我的api密钥
• 不使用api密钥

将api脚本加载到我的页面头部：

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

渲染地图并在地图上放置标记的脚本（加载到页脚）

jQuery（文档）.ready（函数（$）{
$（'动画'）.addClass（'动画'）；
$（'.heart img'）.popover({
位置：'顶部'，
是的，
容器：“#动画”，
内容：功能（）{
返回$（this.attr（'alt'）；
}
});
$（'body'）。在（'click'，函数（e）上{
$（'.heart img'）。每个（函数（）{
如果（！$（this）.is（e.target）&&&$（this）.has（e.target）.length==0&&$（'heart-img'）。has（e.target）.length==0）{
$（this.popover（'hide'）；
}否则{
$（this.popover（'toggle'）；
}
});
});
函数渲染映射（$el）{
var$markers=$（document.find（'#locations.data source li'）；
变量args={
缩放：16，
中心：新google.maps.LatLng（0,0），
mapTypeId:google.maps.mapTypeId.ROADMAP，
滚轮：错误，
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP]
}
};
var map=new google.maps.map（$el[0]，args）；
map.markers=[]；
指数=0；
$markers.each（函数（）{
添加_标记（$（此）、地图、索引）；
索引++；
});
中心地图（地图）；
}
函数add_marker（$marker，map，index）{
var latlng=new google.maps.latlng（$marker.attr（'data-lat'），$marker.attr（'data-lng'）；
var image='../img/maps leaf.png'；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
图标：图像
});
map.markers.push（marker）；
如果（$marker.html（））{
$（'#locations.data display'）.append（'
'+$marker.html（）++'
'）；
$（文档）.on（'click'，'p'+索引，函数（）{
信息窗口。打开（地图、标记）；
setTimeout（函数（）{infowindow.close（）；}，5000）；
});
var infowindow=new google.maps.infowindow({
内容：$marker.html（），
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
}
}
功能中心地图（地图）{
var bounds=new google.maps.LatLngBounds（）；
$.each（map.markers，function（i，marker）{
var latlng=new google.maps.latlng（marker.position.lat（），marker.position.lng（））；
边界扩展（latlng）；
});
如果（map.markers.length==1）{
map.setCenter（bounds.getCenter（））；
map.setZoom（16）；
}否则{
映射边界（bounds）；
}
}
$（文档）.ready（函数（）{
$（'#map'）。每个（函数（）{
渲染_贴图（$（此））；
});
});
});

您描述的内容看起来像是在加载Google Maps API JavaScript之前尝试实例化地图（您正在使用

async

属性）。这就是为什么它有时抛出

google未定义
错误的原因

换句话说，
document.ready
在
https://maps.googleapis.com/maps/api/js?key=MYKEY
已加载

Google Maps API允许您在URL中使用
回调
参数以及API完全加载后调用的函数名。看

因此，在您的情况下，您将使用如下URL：

https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap

然后初始化映射：

initMap() {
    var map = new google.maps.Map($el[0], args);
}

谢谢你的回答。我应该将initMap（）放在哪里？ik应该放在render_map（）函数中，还是放在页面的第一位？并删除render_map？内的新google.maps？回调函数必须位于顶级范围（
window
scope）。例如
window.initMap=function（）？对不起，我的javascript知识不是很好是的，只是
render\u map
没有括号。理想情况下，您也可以将
window.render\u map
置于
document.ready
事件之外，但我不确定它是否依赖于任何范围变量。好的，所以我的javascript是：
window.render\u map=function（$el）{..}
和我的回调=render\u map。但在我的控制台中，我得到：
render\u map不是一个函数
initMap() {
    var map = new google.maps.Map($el[0], args);
}