JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA_cMR3YBDntYYS4WlVyqSNFXWKI89k0q0"></script>
<div id="map_canvas"></div>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}
#map_canvas {
  width: 100%;
  height:900px;
}
.my_label{
  margin-top:50px !important;
}

JavaScript

function createMarker(width, height, radius) {
  var canvas, context;
  canvas = document.createElement("canvas");
  canvas.width = width;
  canvas.height = height;
  context = canvas.getContext("2d");
  context.clearRect(0,0,width,height);
  context.fillStyle = "rgba(255,255,0,1)";
  context.strokeStyle = "rgba(0,0,0,1)";
  context.beginPath();
  context.moveTo(radius, 0);
  context.lineTo(width - radius, 0);
  context.quadraticCurveTo(width, 0, width, radius);
  context.lineTo(width, height - radius);
  context.quadraticCurveTo(width, height, width - radius, height);
  context.lineTo(radius, height);
  context.quadraticCurveTo(0, height, 0, height - radius);
  context.lineTo(0, radius);
  context.quadraticCurveTo(0, 0, radius, 0);
  context.closePath();
  context.fill();
  context.stroke();
  return canvas.toDataURL();
}

var map = new google.maps.Map(document.getElementById("map_canvas"), {
	zoom: 16,
	center: new google.maps.LatLng(-25.363882,131.044922),
	mapTypeId: google.maps.MapTypeId.ROADMAP
});

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(-25.363882,131.044922),
  map: map,
  title:"Hello World!",
  icon: createMarker(25, 25, 4),
  labelClass:"my_label",
  labelAnchor: new google.maps.Point(15, 65),
  label:{
	text: 'My Place',
	color: '#000',
	fontSize:'14px',
	fontWeight:'bold'
  }
});