JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="story-chart"></div>

CSS

#story-chart {
    height: 240px;
    width: 490px;
}

JavaScript

google.load('visualization', '1', {'packages': ['geochart']});
     google.setOnLoadCallback(drawMarkersMap);

    function drawMarkersMap() {
        console.log('hi');
        var data = new google.visualization.DataTable();

        data.addColumn('number', 'latitude');
        data.addColumn('number', 'longitude');
        data.addColumn('number', 'color');
        data.addColumn('number', 'size');
        data.addColumn({type: 'string', role: 'tooltip'});
        
        data.addRows([
            [53.5422137, 112.236328125, 1, 7, 'West Kalimantan, Indonesia']
        ]);

        var options = {
            displayMode: 'markers',
            colorAxis: {
                minValue: 1,
                maxValue: 2,
                colors: ['#038300', '#e983A0']
            },
            height: 240,
            keepAspectRatio: true,
            sizeAxis: {
                maxSize: 7,
                minSize: 7
            },
            backgroundColor: {
                fill: '#cecac7'
            },
            datalessRegionColor: '#f5f4f4',
            legend: 'none',
            tooltip: {
                textStyle: {
                    color: '#281408'
                }
            }
        };
        
        var chart = new google.visualization.GeoChart(document.getElementById('story-chart'));
        chart.draw(data, options);
    };