visualization - the - title seo length

google.load hace que la pantalla/dom vacie

Question

Estoy tratando de agregar una visualización de Google asíncrona, pero estoy teniendo problemas. Lo he reducido a google.load causando el problema. Cuando se ejecuta google.load parte de js, obtengo una pantalla / dom vacía. Cualquiera sabe lo que estoy haciendo mal.

También he intentado usar google.setOnLoadCallback, obtengo el mismo resultado.

Cualquier ayuda seria genial

Código relevante:

 $(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

Este artículo me ayudó a:

Cómo cargar dinámicamente la API de javascript de Google Maps (carga bajo demanda)

Lo que hizo la diferencia aquí fue definir la callback de callback en el atributo de opciones del método de load :

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

Creo que de esta manera no se necesitará más google.setOnLoadCallback(myCallback) y, afortunadamente, parece que cuando se agrega la callback el método no limpia la página.

Answer 2

Nota: lo siguiente es válido para todos los javascript, pero se realizó con Greasemonkey. También utiliza la API de gráficos de Google como ejemplo, pero esta solución va más allá de otras API de Google y puede usarse en cualquier lugar en el que deba esperar a que se cargue un script SIN retrasos establecidos por los temporizadores.

El uso de google.load con una devolución de llamada no resolvió el problema al usar Greasemonkey para agregar un gráfico de Google. En el proceso (Greasemonkey inyectado en la página), se agrega el nodo de script www.google.com/jsapi. Después de agregar este elemento para el javascript jsapi de Google, el script inyectado (o página) está listo para usar el comando google.load (que debe cargarse en el nodo agregado), pero este script jsapi no se cargó todavía. Establecer el tiempo de espera funcionó, pero el tiempo de espera fue simplemente una solución para la carrera de sincronización de la carga del script jsapi de Google con el script inyectado / página. Moverse por donde un script ejecuta google.load (y posiblemente google.setOnLoadCallback) puede afectar la situación de la carrera de tiempo. Lo siguiente ofrece una solución que espera a que el elemento de script de Google se cargue antes de llamar a google.load. Aquí hay un ejemplo:

// ********* 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";

Answer 3

Tuve el mismo problema. Aunque el mío funcionó en Chrome, simplemente no funcionó en Firefox.

Tuve que añadir esto para que funcione.

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

Consulte aquí https://nealpoole.com/blog/2010/07/jquery-getjson-firefox-and-google-visualization-madness/

Además, es posible que desee probar y poner

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

en el encabezado de su código html en una etiqueta de secuencia de comandos y eliminarlo de la función $ (documento) .ready