JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,drawing&amp;ext=.js"></script>
<div id="map_canvas" style=" border: 2px solid #3872ac;"></div>
<div id="info"></div>

CSS

html, body, #map_canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var geocoder;
var map;
var circles = [];

function initialize() {
    map = new google.maps.Map(
    document.getElementById("map_canvas"), {
        center: new google.maps.LatLng(37.4419, -122.1419),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var myManager = new google.maps.drawing.DrawingManager({
        drawingMode: google.maps.drawing.OverlayType.MARKER,
        drawingControl: true,
        drawingControlOptions: {
            drawingModes: [
            google.maps.drawing.OverlayType.CIRCLE]
        },
        circleOptions: {
            clickable: true,
            editable: true,
            draggable: true,
            zIndex: 1
        }
    });
    myManager.setMap(map);
    myManager.setDrawingMode(null);

    google.maps.event.addListener(myManager, 'circlecomplete', function (circle) {
        google.maps.event.addListener(circle, 'radius_changed', function () {
            document.getElementById('info').innerHTML = "circle center = "+circle.getCenter().toUrlValue(6)+ " radius = " + circle.getRadius().toFixed(2) + " meters";
        });
        circles.push(circle);
        document.getElementById('info').innerHTML = "circle center = "+circle.getCenter().toUrlValue(6)+ " radius = " + circle.getRadius().toFixed(2) + " meters";
    });


}
google.maps.event.addDomListener(window, "load", initialize);