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 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

.map_container {

  width:260px; 
  height:260px; 
  overflow:hidden; 
  
  border-radius: 50% !important;
  border: 1px solid black !important;
}