Google使用geoxml3.js和ProjectEdoverlay.js显示kmz文件时是未定义的错误

Question

我有一个网站，该网站使用Google Maps API JavaScript显示地图。我还使用geoxml3和ProjectEdoverlay在地图上显示kmz/kml文件。

我的脚本：

<script async defer src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script>
<script type="text/javascript" src="/js/geoXML/ZipFile.complete.js"></script>
<script type="text/javascript" src="/js/geoXML/geoxml3.js"></script>
<script type="text/javascript" src="/js/geoXML/ProjectedOverlay.js"></script>
<script src="/js/app.js"></script> 

加载页面时，错误：

Uncaught ReferenceError: google is not defined at ProjectedOverlay.js

和

Uncaught ReferenceError: google is not defined at PROJECT_NAME:115

将被扔。

第115行是：

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

但是，它们并不总是被抛弃。这大概每10次加载页面一次就会发生。

Answer 1

问题是Google脚本正在异步加载。geoxml3.js和ProjectEdoverlay.js要求Google Maps API完全连接并加载到工作。

如果在Google API加载之前，其他JS脚本中的其他JS脚本中的一个将加载，则会引发错误。

简单的解决方案是删除Google API脚本中的异步延期：

<script src="//maps.googleapis.com/maps/api/js?key=API_KEY_HERE&libraries=places"></script>

Answer 2

是的，当您在加载之前使用Google时会发生。这经常是一个问题。因此，这样做一个回调功能：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
<script>
   function initMap() {
       var mapDiv = document.getElementById('map');
       var map = new google.maps.Map(mapDiv, {
          zoom: 8,
          center: new google.maps.LatLng(-34.397, 150.644)
        });
      }
</script>