JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<!DOCTYPE html>
<html>

  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Custom Marker Symbols</title>
    <style>
      /* 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;
      }

    </style>
  </head>

  <body>
    <div id="map"></div>
    <script>
      // This example uses SVG path notation to add a vector-based symbol
      // as the icon for a marker. The resulting icon is a star-shaped symbol
      // with a pale yellow fill and a thick yellow border.

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

        var goldStar = {
          path: 'M81.8,18.2C73.3,9.7,62,5,50,5S26.7,9.7,18.2,18.2c-17.5,17.5-17.5,46.1,0,63.6C26.7,90.3,38,95,50,95s23.3-4.7,31.8-13.2   C99.4,64.3,99.4,35.7,81.8,18.2z M77.8,77.8C70.4,85.2,60.5,89.3,50,89.3s-20.4-4.1-27.8-11.5c-15.3-15.3-15.3-40.2,0-55.6   c7.4-7.4,17.3-11.5,27.8-11.5s20.4,4.1,27.8,11.5C93.1,37.5,93.1,62.5,77.8,77.8zM43.7,50c0-1.6-1.3-2.9-2.9-2.9H27.5l1.4-1.4c1.1-1.1,1.1-2.9,0-4c-1.1-1.1-2.9-1.1-4,0L18.6,48c0,0,0,0,0,0   c-0.1,0.1-0.2,0.3-0.3,0.4c0,0.1-0.1,0.2-0.1,0.2c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.3c0,0.1-0.1,0.2-0.1,0.2   c-0.1,0.4-0.1,0.8,0,1.1c0,0.1,0,0.2,0.1,0.2c0,0.1,0.1,0.2,0.1,0.3c0,0.1,0.1,0.2,0.1,0.3c0,0.1,0.1,0.2,0.1,0.2   c0.1,0.2,0.2,0.3,0.3,0.4c0,0,0,0,0,0l6.3,6.3c0.6,0.6,1.3,0.8,2,0.8s1.5-0.3,2-0.8c1.1-1.1,1.1-2.9,0-4l-1.4-1.4h13.3   C42.4,52.9,43.7,51.6,43.7,50zM45.8,28.9l1.4-1.4v13.3c0,1.6,1.3,2.9,2.9,2.9s2.9-1.3,2.9-2.9V27.5l1.4,1.4c0.6,0.6,1.3,0.8,2,0.8s1.5-0.3,2-0.8  ...