JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<div id="map_canvas"><!-- map goes here --></div>
  <div class="minhaRegiao">
    <p style="color: white;">Minha Regiao</p>
  </div>
  
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

CSS

.minhaRegiao {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    justify-content: center;
    position: absolute;
    top: 80%;
    z-index: 9999;
    background-color: #522;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
  }

JavaScript

function map() {
  const	mapCanvas = document.getElementById('map_canvas');
  const map_options = {
    zoom: 14,
    center: new google.maps.LatLng(40.778848, -73.968898),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    fullscreenControl: false,
    streetViewControl: false,
    zoomControl: false,
    clickableIcons: false,
    mapTypeControl: false,
  };
  const map = new google.maps.Map( mapCanvas, map_options );
  const myLatLng = new google.maps.LatLng(40.778848, -73.968898);
  myMarker = new google.maps.Marker({
    map: map,
    position: myLatLng,
  });
  map.setCenter( myLatLng );
  mapCanvas.style.width = mapCanvas.style.height = '100%';
}


$(document).ready(map());