JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=geometry"></script>
<body>
    <div>
        <span>Click on two spots on the map (or more) then click OK to draw the circles and the intersection points <b>(currently wrong!)</b> in purple</span>
        <br />
        <span>Main work is in the function: <b>drawIntersection(point1, point2, radius)</b></span>
        <br />
        <input id="Button1" type="button" value="OK" onclick="drawCircles();" />
    </div>
    <div id="map-canvas"></div>
</body>

CSS

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

JavaScript

function getRadiusFromZoomLevel(z) {
	return 287000 * (2 << 5) / (2 << z);
}

var map;
var markers = [];
var circles = [];
var intersections = [];

var icon1 = {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 4,
	fillOpacity: 0.5,
	strokeWeight: 3,
	animation: google.maps.Animation.DROP,
	strokeColor: '#FF0000',
	fillColor: '#FF0000'
};
var icon2 = {
	path: google.maps.SymbolPath.CIRCLE,
	scale: 4,
	fillOpacity: 0.5,
	strokeWeight: 3,
	animation: google.maps.Animation.DROP,
	strokeColor: '#AA00FF',
	fillColor: '#AA00FF'
};

function initialize() {
    var mapOptions = {
        zoom: 5,
        center: new google.maps.LatLng(37.09024, -95.712891)
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    
    google.maps.event.addListener(map, 'click', function (event) {
        var marker = new google.maps.Marker({
            position: event.latLng,
            map: map,
            title: 'lat: ' + event.latLng.lat() + ' lng: ' + event.latLng.lng(),
            icon: icon1
        });
        var bounds = map.getBounds();
        if (!bounds.contains(event.latLng)) {
            bounds.extend(location);
            map.fitBounds(bounds);
        }
        markers.push(marker);
    });
}

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

function drawCircles() {
    while (circles[0]) {
        circles.pop().setMap(null);
    }
    for (var i=0; i<markers.length; i++) {
        var options = {
            strokeColor: '#FF0000',
            strokeOpacity: 0.8,
            strokeWeight: 1,
            fillColor: '#FF0000',
            fillOpacity: 0.35,
            map: map,
            center: markers[i].getPosition(),
            radius: getRadiusFromZoomLevel(map.getZoom())
        };
        circles.push(new google.maps.Circle(options));
    }
    drawIntersections();
}

function drawIntersections() {
    while (intersections[0]) {
        intersections.pop().setMap(null);
    }
    for (var i=0;...