JSFiddle - React, Tailwind, and code Playground

by Daniel Buttery

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['geochart']}]}"></script>

<div id="filter_div"></div>
<div id="dashboard_div">
    <div id="chart_div"></div>
    
</div>
<div id="png"></div>

JavaScript

google.setOnLoadCallback(drawRegionsMap);
      function drawRegionsMap() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Country');
        data.addColumn('string', 'Name');
          data.addColumn('number', 'P1');
        
          data.addRows([
                    ['DE','Germany', 228],
                    ['AR','Argentina', 53],
                    ['SE','USA', 7746]
        ]);
      var options = {
        region: 'world', 
        displayMode: 'markers',
        backgroundColor: '#B3D1FF',
        minValue: 0,  colors: ['#A1FF8E', '#008042']
      };                       
      var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
      chart.draw(data, options);
};