JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;.js"></script>
<div id="map_canvas"></div>

CSS

body,html,#map_canvas{height:100%;margin:0;}
#map_canvas .centerMarker{
  position:absolute;
  /*url of the marker*/
  background:url(http://maps.gstatic.com/mapfiles/markers2/marker.png) no-repeat;
  /*center the marker*/
  top:50%;left:50%;
  z-index:1;
  /*fix offset when needed*/
  margin-left:-10px;
  margin-top:-34px;
  /*size of the image*/
  height:34px;
  width:20px;
  cursor:pointer;
}

JavaScript

function initialize() {
        var mapStyle = [
            {
                stylers: [
                    { lightness: -60 }
                ]
            }
        ];
          
        var mapOptions = {
          zoom: 14,
          center: new google.maps.LatLng(52.5498783, 13.425209099999961),
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          styles: mapStyle
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
        $('<div/>').addClass('centerMarker').appendTo(map.getDiv());
        var populationOptions = {
                //strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: "", //'#FF0000',
                fillOpacity: 0.35,
                map: map,
                center: new google.maps.LatLng(52.5498783, 13.425209099999961),
                radius: Math.sqrt(5) * 100
            };
            var cityCircle = new google.maps.Circle(populationOptions);    
           
      }

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