JSFiddle - React, Tailwind, and code Playground

HTML

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=drawing"
     async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

function newMap()
{
	var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 0, lng: 0},
    zoom: 5,
    gestureHandling: 'greedy'
  });
  
  var marker = new google.maps.Marker({
  	position: new google.maps.LatLng(0, 0),
  	icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png',
    label: { color: '#00aaff', fontWeight: 'bold', fontSize: '14px', text: 'Your text here' },
    optimized: false,
    visible: true
  });
  
  marker.setMap(map);
}

newMap();