JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://www.google.com/jsapi"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<h1>Drop Point Map</h1> 
<hr />
<div id="map_div" style="width: 99%; height: 85%"></div>

CSS

html, body, #map_div {
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

google.load("visualization", "1", {
    packages: ["map"]
});
google.setOnLoadCallback(drawChart);

function drawChart() {
    google.visualization.Map.prototype.getMap = function () {
        for (var k in this) {
            if (this[k].constructor == google.maps.Map) return this[k];
        }
    }
    var data = google.visualization.arrayToDataTable([
        ['Lat', 'Long', 'Name'],
        [12, 77, 'Random location nearby']
    ]);

    var map = new google.visualization.Map(document.getElementById('map_div'));
    map.draw(data, {
        showTip: true,
        zoomLevel: 10,
        mapType: "normal"
    });
    google.maps.event.addListenerOnce(map.getMap(),'idle', function() {
        console.log(map.getMap().getZoom() + ":" + map.getMap().getCenter());
        map.getMap().setZoom(12);
    });
}