JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;libraries=drawing&amp;ext=.js"></script>
<div id="info"></div>
<div id="map"></div>

CSS

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

JavaScript

var map;

function DistanceWidget(map) {
    this.set('map', map);
    this.set('position', map.getCenter());

    this.marker = new google.maps.Marker({
        draggable: true,
        title: 'Drag to set centre'
    });
    this.marker.bindTo('map', this);
    this.marker.bindTo('position', this);

    var radiusWidget = new RadiusWidget();
    radiusWidget.bindTo('map', this);
    radiusWidget.bindTo('center', this, 'position');
    this.bindTo('distance', radiusWidget);
    this.bindTo('bounds', radiusWidget);
}
DistanceWidget.prototype = new google.maps.MVCObject();
/* Add the `setMarkerPosition` method to this class */
DistanceWidget.prototype.setMarkerPosition = function (position) {
    this.marker.setPosition(position);
}

function RadiusWidget() {
    var circle = new google.maps.Circle({
        fillColor: '#000000',
        fillOpacity: 0.3,
        strokeWeight: 2,
        clickable: true,
        editable: true,
        zIndex: 1
    });
    this.set('distance', 5);
    this.bindTo('bounds', circle);
    circle.bindTo('center', this);
    circle.bindTo('map', this);
    circle.bindTo('radius', this);
    this.addSizer_();
}
RadiusWidget.prototype = new google.maps.MVCObject();
RadiusWidget.prototype.distance_changed = function () {
    this.set('radius', this.get('distance') * 1000);
};
RadiusWidget.prototype.addSizer_ = function () {
    var sizer = new google.maps.Marker({
        draggable: true,
        title: 'Drag to expand search area'
    });
    sizer.bindTo('map', this);
    sizer.bindTo('position', this, 'sizer_position');
    var me = this;
    google.maps.event.addListener(sizer, 'drag', function () {
        me.setDistance();
    });
};
RadiusWidget.prototype.center_changed = function () {
    var bounds = this.get('bounds');
    if (bounds) {
        var lng = bounds.getNorthEast().lng();
        var position = new google.maps.LatLng(this.get('center').lat(), lng);
        this.set('sizer_position', position);
   ...