异步加载谷歌地图答案

【问题标题】：Loading google maps asynchronously异步加载谷歌地图
【发布时间】：2013-05-02 14:20:25
【问题描述】：

我正在尝试异步加载我的谷歌地图，它可以工作，但它正在加载地图两次。如果我删除“box.onload = initialize;”这将停止该问题，但随后信息框不显示...如何修复我的代码，使其仅加载一次地图并显示信息框。

function loadScript() {
   var map = document.createElement('script');
   map.type = 'text/javascript';
   map.src = 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=initialize';
   document.body.appendChild(map);  

   map.onload = function() {
      var box = document.createElement('script');
      box.type = 'text/javascript';
      box.src = 'https://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox_packed.js';
      document.body.appendChild(box);
      box.onload = initialize;
   };
}           
window.onload = loadScript;

【问题讨论】：

从你的 map.src 中移除回调
这会使地图完全停止工作:(
问题是在我看来你最终会打电话给initialize 两次。也许 box.onload 应该调用不同的函数
这就是我的想法，这就是我卡住的地方:(
将您的初始化函数也添加到问题中可能很有用

标签： google-maps

【解决方案1】：

地图出现两次，因为您调用了两次initialize。

在解决这个问题之前，让我们稍微简化一下您的代码。永远不要让自己重复这样的代码块；而是把它变成一个通用函数。

另外，不要从 googlecode.com 加载 infobox.js； Google Code 不是 CDN。加载您自己的副本。

因此，代码可能如下所示：

function addScript( url, callback ) {
    var script = document.createElement( 'script' );
    if( callback ) script.onload = callback;
    script.type = 'text/javascript';
    script.src = url;
    document.body.appendChild( script );  
}

function loadMapsAPI() {
    addScript( 'https://maps.googleapis.com/maps/api/js?key=key_goes_here&sensor=false&callback=mapsApiReady' );
}

function mapsApiReady() {
    addScript( 'infobox.js', initialize );
}

window.onload = loadMapsAPI;

【讨论】：

谢谢！这完全解决了我的问题：D
应该是'addScript('infobox.js', initialize);'相反;)
@LetterAfterZ - 哦！谢谢！ :-)
@MichaelGeary 有史以来最好的答案！其他方法都不适合我。谢谢;)

【解决方案2】：

我创建了这个脚本。您可以调用它并添加任何回调函数，因此您只需将其包含到您的脚本中并调用

googleMapsLoadAsync(function(){ alert('google maps loaded'); });

脚本

var googleMapsAsyncLoaded = false;
var googleMapsAsyncCallback = function(){ };

function googleMapsLoadAsync(callback) {

    if (typeof callback !== 'undefined') { googleMapsAsyncCallback=callback; }

    if(!googleMapsAsyncLoaded) {

        $.getScript('https://maps.googleapis.com/maps/api/js?sensor=false&async=2&callback=googleMapsAsyncLoadedFunction');

    } else {

        googleMapsAsyncLoadedFunction();

    }

}

function googleMapsAsyncLoadedFunction() {

    googleMapsAsyncLoaded = true;

    if(googleMapsAsyncCallback && typeof(googleMapsAsyncCallback) === "function") {

        googleMapsAsyncCallback();

    }

    googleMapsAsyncCallback = function(){ };

}

【讨论】：