I'm trying to put my data in the correct location on the map according to the Google GeoCharts rules, everything works ok, however I'm not able to make the plugin detail just a city or state:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><scripttype="text/javascript">
google.charts.load('current', {
'packages':['geochart'],
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Xaxim, Curitiba', 200],
['Centro, Curitiba', 300]
]);
var options = {
region: 'BR',
resolution: 'provinces',
displayMode: 'markers',
colorAxis: {colors: ['green', 'blue']},
legend:'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>On the map in question (example taken from from here ), the location of the bookmarks is in place correct, but I would like to display a more specific region, that is, replace 'BR' with something more detailed like 'BR-PR' for example, but I did not find in the documentation and no examples for Brazil, just something for the US
My question is if I can focus the Google GeoCharts map on a area smaller than an entire country (or US)?
Or if not, what other graphics API can give me more detailed regions?
PS:
This api key is not a sensitive data, it is a public demonstration key for api.