JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://www.google.com/jsapi?=.js"></script>
<div id="visualization"></div>
JavaScript
google.load('visualization', '1', {
packages: ['corechart', 'geochart'],
callback: drawVisualization
});
function drawVisualization() {
// Create and populate the data table.
var data = google.visualization.arrayToDataTable([
['country', 'name', 'value'],
['RU', 'Russia', 5],
['US', 'United States', 2],
['FR', 'France', 10],
['AU', 'Australia', 7]
]);
// Create and draw the visualization.
var chart = new google.visualization.GeoChart(document.getElementById('visualization'))
chart.draw(data, {
sizeAxis: {
minSize: 10,
maxSize: 20
},
colorAxis: {
colors: ['red', 'green']
},
width: 500, height: 400,
displayMode: 'regions'
});
}