JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize() {

            var myLatLng = new google.maps.LatLng(-33.887097, 18.511804);
            var mapCanvas = document.getElementById('map_canvas');

            var mapOptions = {
                center: myLatLng,
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                disableDefaultUI: true
            }

            var map = new google.maps.Map(mapCanvas, mapOptions);

            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <div class="container" style="width:260px; height:260px; position:absolute; left:0; right:0; top:60px; margin:auto;">
        <div id="map_canvas" class="map_container"></div>
    </div>
</body>

CSS

.container {
    border-radius:50%;
    border:1px solid #000000;
}
.map_container {
    width:260px;
    height:260px;
    overflow:hidden;
    -webkit-transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
    border-radius: 50% !important;
    /*border: 1px solid black !important;*/
}