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_3" style="width: 99%; height: auto; border: 1px solid #ccc; margin-bottom: 1em;"></div>
<script>
    document.addEventListener("DOMContentLoaded", function(event) {
        google.charts.setOnLoadCallback(drawMarkersMap3);

        function drawMarkersMap3() {
            var data = google.visualization.arrayToDataTable([
                ['City', 'A', 'B'],
                ['Madrid', 50, 20],
                ['Barcelona', 30, 10],
                ['Vigo', 10, 30],
                ['Sevilla', 10, 80],
                ['Valladolid', 5, 30],
            ]);

            var options = {
                sizeAxis: {
                    minValue: 0,
                    maxValue: 100
                },
                region: 'ES',
                displayMode: 'markers',
                colorAxis: {
                    colors: ['#7ABD94', '#FFE19F', '#FF7954']
                },
                datalessRegionColor: '#e3e3e3',
                backgroundColor: '#beeaed'
            };

            var chart = new google.visualization.GeoChart(document.getElementById('geo_3'));
            chart.draw(data, options);
        };
    });

</script>