JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="map-container"></div>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
</body>

CSS

html
        {
            height: 100%;
        }
        body
        {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        #map-container
        {
            height: 100%;
            width: 100%;
            min-width:500px;
            min-height:300px;
        }

JavaScript

var _map,
            manager;
        
        $(document).ready(function () {
            var mapOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            _map = new google.maps.Map($("#map-container")[0], mapOptions);
            
            manager = new google.maps.drawing.DrawingManager({
                map: _map,
                drawingControlOptions: {
                    drawingModes: [google.maps.drawing.OverlayType.CIRCLE]
                }
            });

            google.maps.event.addListener(manager, 'circlecomplete', function (circle) {

                var center = circle.getCenter(), radius = circle.getRadius();
                
                manager.setDrawingMode(null);
                var circleOptions = {
                        center: center,
                        editable: true,
                        map: _map,
                        radius: radius * 0.80,
                        visible: true
                    },
                    newCircle = new google.maps.Circle(circleOptions);

                google.maps.event.addListener(newCircle, 'center_changed', function () {
                    var oldCenter = center,
                        newCenter = newCircle.getCenter();

                    if (oldCenter.lat() != newCenter.lat() && oldCenter.lng() != newCenter.lng()) {
                        newCircle.setCenter(center);
                    }
                });

                google.maps.event.addListener(newCircle, 'radius_changed', function () {
                    newCircle.setEditable(false);
                });
                
            });
        });