google.load खाली डोम/स्क्रीन

Question

का कारण बनता है मैं एक Google विज़ुअलाइज़ेशन एसिंक्रोनस जोड़ने की कोशिश कर रहा हूं, लेकिन मैं समस्याओं में भाग रहा हूं। मैंने इसे google.load में संकुचित कर दिया है जिससे समस्या उत्पन्न हुई है। जब js रन का google.load हिस्सा चलाता है, तो मुझे एक खाली स्क्रीन/डोम मिलता है। कोई भी जानता है कि मैं क्या गलत कर रहा हूं।

मैंने 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); 
} 

}); 

Answer 1

मैं एक ही मुद्दा था:

किसी भी मदद महान

प्रासंगिक कोड होगा। हालांकि मेरा क्रोम में काम करता था, यह अभी फ़ायरफ़ॉक्स में काम नहीं करता था।

मैं इस जोड़ने के लिए यह काम करने के लिए

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

यहाँ देख https://nealpoole.com/blog/2010/07/jquery-getjson-firefox-and-google-visualization-madness/

भी पाने के लिए था, आप का प्रयास करना चाहें और अपने html के शीर्षक में

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

डाल एक स्क्रिप्ट टैग में और इसे $ (दस्तावेज़) से हटा रहा है। पहले से ही

Answer 2

यह लेख मुझे मदद मिली:

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 जोड़ा गया है यह तरीका पृष्ठ को साफ़ नहीं करेगा।

Answer 3

नोट: निम्नलिखित सभी जावास्क्रिप्ट के लिए अच्छा है, लेकिन Greasemonkey के साथ किया गया था। यह एक उदाहरण के रूप में Google चार्ट एपीआई का भी उपयोग करता है, लेकिन यह समाधान अन्य Google एपीआई से आगे जाता है और टाइमर द्वारा सेट की गई देरी के बिना स्क्रिप्ट लोड होने के लिए आपको कहीं भी इंतजार करने की आवश्यकता होती है।

कॉलबैक के साथ google.load का उपयोग करके Google चार्ट जोड़ने के लिए Greasemonkey का उपयोग करते समय समस्या का समाधान नहीं हुआ। प्रक्रिया में (Greasemonkey पृष्ठ में इंजेक्शन), www.google.com/jsapi स्क्रिप्ट नोड जोड़ा गया है। Google के jsapi जावास्क्रिप्ट के लिए यह तत्व जोड़ने के बाद, इंजेक्शन (या पृष्ठ) स्क्रिप्ट 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";