JSFiddle - React, Tailwind, and code Playground

by Osvaldo

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
    google.charts.load('current', {
        'packages': ['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'AIzaSyBiy7JuMr1LFrecAu8SORp9Wt2vYM8A3D8',
        'language': 'es'
    });

</script>

<div id="geo_1" style="width: 100%; height: auto; margin-bottom: 1em;"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = google.visualization.arrayToDataTable([
                ['Country', 'Popularity'],
                ['Germany', 200],
                ['United States', 300],
                ['Brazil', 400],
                ['Canada', 500],
                ['France', 600],
                ['RU', 700]
            ]);

            var options = {
                colorAxis: {
                    colors: ['#7ABD94', '#FFE19F', '#FF7954']
                },
                datalessRegionColor: '#e3e3e3',
                backgroundColor: '#beeaed'
            };

            var chart = new google.visualization.GeoChart(document.getElementById('geo_1'));

            chart.draw(data, options);
        }
    });

</script>