JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"></script>
<div id="results"></div>

<div id="map"></div>

CSS

#map{
    width: 450px;
    height: 400px;
}

JavaScript

function initialize(){
    var map;
    var pos1 = new google.maps.LatLng(50.272213,-5.054973);
    var pos2 = new google.maps.LatLng(50.272213,-5.4);
    var options = {
        'zoom': 12,
        'center': pos1,
        'mapTypeId': google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map'), options);


    var circle2 = new google.maps.Circle({
        center: pos1,
        map: map,
        fillColor: 'green',
        fillOpacity: .5,
        strokeWeight: 0,
        zIndex: 10
    });
        var circle3 = new google.maps.Circle({
        center: pos2,
        map: map,
        fillColor: 'red',
        fillOpacity: .5,
        strokeWeight: 0,
            zIndex: 11
    });
    circle2.setRadius(19000.55489862987); 
    circle3.setRadius(21000.55489862987); 
    
    map.fitBounds(circle2.getBounds());   
    
}
            
google.maps.event.addDomListener(window, 'onload', initialize());