JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;signed_in=false&amp;libraries=places,geometry"></script>
<div id="map_canvas"></div>
<div id="info"></div>

CSS

/* Google Map */
 #map_canvas {
    border:1px solid #ccc;
    margin-top:5px;
    width:100%;
    height:400px;
}

JavaScript

var marker;
var overlay;
var edgeMarker;
var map;

function initGoogleMap() {
    console.info('initGoogleMap');
    var latitude = 10.314241194743438;
    var longitude = 123.90536092883599;
    var zoom = 17;
    var latlng = new google.maps.LatLng(latitude, longitude);
    var map_options = {
        center: latlng,
        zoom: zoom,
        draggable: true,
        zoomControl: true,
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), map_options);
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(latitude, longitude),
        map: map,
        icon: {
            path: google.maps.SymbolPath.CIRCLE,
            fillOpacity: 0.5,
            fillColor: "#333",
            strokeOpacity: 1.0,
            strokeColor: '#CB0909',
            strokeWeight: 0,
            scale: 151 // in pixels
        }
    });
    overlay = new google.maps.OverlayView();
    overlay.draw = function () {};
    overlay.setMap(map);

    google.maps.event.addListenerOnce(map, 'idle', computeRadius);
    google.maps.event.addListener(map, 'center_changed', computeRadius);
    google.maps.event.addListener(map, 'zoom_changed', computeRadius);

    console.info('init zoom level: ', zoom);
    marker.bindTo('position', map, 'center');
}

function computeRadius() {
    if (!overlay) return;
    var centerPixel = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
    var outerPoint = new google.maps.Point(centerPixel.x + 151, centerPixel.y);
    var pixelLatLng = overlay.getProjection().fromDivPixelToLatLng(outerPoint);
    
    console.log("##############"+pixelLatLng);
    if (!edgeMarker || !edgeMarker.setPosition) {
        edgeMarker = new google.maps.Marker({
            position: pixelLatLng,
            map: map,
        });
    } else {
        edgeMarker.setPosition(pixelLatLng);
    }
    var radius = google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), edgeMarker.getPosition());
  ...