Olá,
Estou com um problema ao executar um mapa do Google Chart GeoChart no Java...
Se estiver em um arquivo .html normal, funciona, mas dentro do meu projeto com o xhtml não funciona.
Código em html:
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Cidade', 'Margem', 'Vendas'],
['Rio de Janeiro', 45000, 30],
['Porto Alegre', 72000, 50],
['São Paulo', 27000, 25],
['Santa Maria', 11000, 11]
]);
var options = {
region: 'BR',
displayMode: 'markers',
colorAxis: {colors: ['red', 'green']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Abaixo o código no java:
<ui:define name="conteudo">
<div class="container">
<div class="row">
<div class="col-md-6 BorderedBox">
<div id="chart_div2" class="chart"></div>
</div>
</div>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geochart']});
google.charts.setOnLoadCallback(drawMarkersMap);
function drawMarkersMap() {
var data = google.visualization.arrayToDataTable([
['Cidade', 'Margem', 'Vendas'],
['Rio de Janeiro', 45000, 30],
['Porto Alegre', 72000, 50],
['São Paulo', 27000, 25],
['Santa Maria', 11000, 11]
]);
var options = {
region: 'BR',
displayMode: 'markers',
colorAxis: {colors: ['red', 'green']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div2'));
chart.draw(data, options);
};
</script>
</div>
</ui:define>
O Mapa aprece em Java, porém todo em branco, sem aparecer as bolinhas com os valores setados, Já no html aparece o mapa com as bolinhas coloridas.