JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

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

CSS

html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0px;
}

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: {
    url: createMarker(25, 25, 4),
    labelOrigin: new google.maps.Point(55, 12)
  },
  label: {
    text: 'My Place',
    color: '#000',
    fontSize: '14px',
    fontWeight: 'bold'
  }
});