JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCPJpjD-qcR_yIxJnS8maR5W9KB0E3EzYI&callback=initMap&libraries=&v=weekly"
      defer
    ></script>
    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

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

// The following example creates complex markers to indicate beaches near
// Sydney, NSW, Australia. Note that the anchor is set to (0,32) to correspond
// to the base of the flagpole.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12.6,
    center: {lat: 34.262837, lng: -118.553745}
  });

  setMarkers(map);
}

// Data for the markers consisting of a name, a LatLng and a zIndex for the
// order in which these markers should display on top of each other.
var beaches = [
  ['Castlebay Lane', 34.293732, -118.547558, 1],
  ['Porter Ranch', 34.293200, -118.581643, 2],
  ['Granada Hills', 34.261026, -118.525246, 3],
  ['Chatsworth High', 34.253441, -118.586385, 4],
  ['Stoney Point', 34.252099, -118.588129, 5],
  ['Valley Academy of Arts and Sciences', 34.259865, -118.502794, 6],
  ['John F. Kennedy High School', 34.275762, -118.487585, 7],
  ['Jane Addams High', 34.274064, -118.488198, 8],
  ['Northridge Academy High', 34.245304, -118.524449, 9],
  ['PUC Lakeview Charter High', 34.314333, -118.459644, 10],
  ['Grover Cleveland Charter High', 34.217896, -118.547458, 11],
  ['Sylmar Senior High', 34.307854, -118.441911, 12]
];
var beaches2 = [
  ['Robert Frost', 34.294790, -118.511594, 1],
  ['Van Gogh', 34.304975, -118.506041, 2],
  ['Beckford', 34.267037, -118.549052, 3],
  ['El Oro Way', 34.293216, -118.504881, 4],
  ['Darby', 34.266542, -118.533200, 5],
  ['Germain', 34.261672, -118.585269, 6],
  ['Alfred Bernhard', 34.251369, -118.552957, 7],
  ['Knollwood', 34.285142, -118.492600, 8],
  ['Granada Elementary', 34.266996, -118.507782, 9],
  ['Ernest Lawrence', 34.253998, -118.592666, 10],
  ['Chatsworth Park', 34.257881, -118.606945, 11],
  ['Topeka Drive', 34.247747, -118.546406, 12],
  ['Superior Street', 34.247381, -118.574549, 13],
  ['Patrick Henry', 34.259025, -118.512039, 14],
  ['Andasol Avenue', 34.254770, -118.514375, 15]
];

var beaches3 = [
  ['Tulsa Street Elementary', 34.269284, -118.492357, 1],
 ...