的google.load導致空DOM /屏幕

我試圖添加一個谷歌的可視化同步，但是我遇到了問題。我已經縮小到google.load導致問題。當js的google.load部分運行時，我得到一個空白的屏幕/ dom。任何人都知道我做錯了什麼。的google.load導致空DOM /屏幕

我使用google.setOnLoadCallback也試過，我得到了相同的結果。

任何幫助將是巨大的

相關代碼：

$(document).ready(function() { 
google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization }); 


       function drawVisualization() { 
        $.ajax({ 
         type: "POST", 
         data: "{'monitorId':'" + monitor + "','monitorName':'" + name + "','context':'" + context + "'}", 
         dataType: "json", 
         url: "WebService.asmx/LoadMonitorToolGeo", 
         contentType: "application/json; charset=utf-8", 
         processData: true, 
         success: function (msg) { 

          var obj = jQuery.parseJSON(msg.d); 


          // $(msg.d).hide().appendTo("#sortable").fadeIn(); 
          $("#" + obj.context).find(".toolContent").hide().html(obj.data).fadeIn(); 

          DrawWorldMap(obj.map, obj.context); 

         }, 
         error: function (req, status, error) { 

         }, 
         complete: function (req, status) { 


         } 
        }); 



function DrawWorldMap(response, id) { 
    var data = new google.visualization.DataTable(); 
    data.addRows(response.d.length); 
    data.addColumn('string', 'Country'); 
    data.addColumn('number', 'Popularity'); 
    for (var i = 0; i < response.d.length; i++) { 
     data.setValue(i, 0, response.d[i].Country); 
     data.setValue(i, 1, response.d[i].Popularity); 
    } 
    var options = {}; 
    options['dataMode'] = 'regions'; 

    var container = document.getElementById(id); 
    var geomap = new google.visualization.GeoMap(container); 
    geomap.draw(data, options); 
} 

});

來源

2011-03-14 user603682

我有同樣的問題。儘管我的Chrome工作正常，但它在Firefox中不起作用。

我不得不添加此來得到它的工作

setTimeout(function() { 
    // Google Visualization stuff goes here 
}, 0);

看到這裏https://nealpoole.com/blog/2010/07/jquery-getjson-firefox-and-google-visualization-madness/

此外，你可能會想嘗試，並把

google.load('visualization', '1', { 'packages': ['geomap'] }, { 'callback': drawVisualization });

在HTML的標題在腳本標籤，並從$（document）.ready函數刪除它

來源

2011-08-31 05:08:35

這篇文章幫助我：

How to dynamically load the Google Maps javascript API (On demand loading)

所做的有什麼區別這裏是確定在load方法選項callback屬性：

var options = {packages: ['corechart'], callback : myCallback}; 
google.load('visualization', '1', options);

我相信這樣google.setOnLoadCallback(myCallback)將不再需要和幸運的是，當callback被添加時，該方法不會清理頁面。

來源

2012-08-30 15:38:21 zanona

這個答案是正確的，避免不必要的超時。謝謝zanona！也可以使用這樣的：谷歌。load（'visualization'，'1'，{ packages：['corechart']， callback：initCharts }）; – Dan 2013-01-14 17:16:09

謝謝你！ – 2015-09-21 12:40:51

注：以下是適合所有的JavaScript，但Greasemonkey的做。它還使用Google圖表API作爲示例，但該解決方案不僅限於其他Google API，還可以用於任何需要等待腳本加載而無需定時器設置延遲的任何位置。

使用的google.load有回調並沒有解決這個問題用的Greasemonkey時添加谷歌的圖表。在這個過程中（Greasemonkey注入頁面），添加了www.google.com/jsapi腳本節點。加入此元素爲谷歌的JSAPI JavaScript之後，注入（或頁面）的腳本就可以使用了的google.load命令（需要在添加的節點被加載），但這個JSAPI腳本沒有加載呢。設置超時工作，但超時僅僅是Google jsapi腳本加載與注入/頁面腳本的時間競爭的一種解決方法。在腳本執行google.load（也可能是google.setOnLoadCallback）的地方移動會影響計時競賽的情況。下面介紹一個解決方案，在調用google.load之前等待google腳本元素加載。這裏是一個例子：

// ********* INJECTED SCRIPT *********// 
// add element 
var gscript = document.createElement('script'); 
gscript.setAttribute("type", "application/javascript"); 
gscript.setAttribute("id", "XX-GMPlusGoogle-XX"); 
document.body.appendChild(gscript); 

// event listener setup  
gscript.addEventListener("load",  
    function changeCB(params) { 
     gscript.removeEventListener("load", changeCB); 
     google.load("visualization", "1", {packages:["corechart"], "callback": 
      function drawChart() { 
       var data; 
       data = new google.visualization.arrayToDataTable(durationChart); 

       var options = { 
        title:"Chart Title", 
        legend: {position:"none"}, 
        backgroundColor:"white", 
        colors:["white","Blue"], 
        width: window.innerWidth || document.body.clientWidth, 
        height: window.innerHeight || document.body.clientHeight, 
        vAxis: {title: "Durations", baselineColor: "black", textStyle:{fontSize:12}}, 
        hAxis: {title: "Days Since First Instance"}, 
        height: ((cnt > 5)? cnt * 50 : 300), 
        isStacked: true 
       }; // options 


       // put chart into your div element 
       var chart = new google.visualization.BarChart(document.getElementById('XX-ChartDiv-XX')); 
       chart.draw(data, options); 
      } // drawChart function 
     }); //packages within google.load & google load 
    } // callback changeCB 
); 

// can use SSL as "https://www.google.com/jsapi"; 
gscript.src = "http://www.google.com/jsapi";

來源

2014-02-09 23:58:36 codeaperature

的google.load導致空DOM /屏幕

回答

相關問題