JSFiddle - React, Tailwind, and code Playground

by pepperdigital

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=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize&libraries=&v=weekly" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map_canvas"></div>
</body>

</html>

CSS

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map_canvas {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

/ Variables for Google maps
var map, mapElem, markerImg, infoWindow, marker;
var markers = [],
  infoWindows = [],
  races = [{
      lat: 40.7127753,
      lng: -74.0059728,
      url: ""
    },
    {
      lat: 40.735657,
      lng: -74.1723667,
      url: ""
    }
  ];
var mapOptions = {
  mapTypeId: 'roadmap',
  styles: [{
      "featureType": "administrative",
      "elementType": "labels.text.fill",
      "stylers": [{
        "color": "#444444"
      }]
    },
    {
      "featureType": "landscape",
      "elementType": "all",
      "stylers": [{
        "color": "#f2f2f2"
      }]
    },
    {
      "featureType": "poi",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "road",
      "elementType": "all",
      "stylers": [{
          "saturation": -100
        },
        {
          "lightness": 45
        }
      ]
    },
    {
      "featureType": "road.highway",
      "elementType": "all",
      "stylers": [{
        "visibility": "simplified"
      }]
    },
    {
      "featureType": "road.arterial",
      "elementType": "labels.icon",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "transit",
      "elementType": "all",
      "stylers": [{
        "visibility": "off"
      }]
    },
    {
      "featureType": "water",
      "elementType": "all",
      "stylers": [{
          "color": "#2bb0e6"
        },
        {
          "visibility": "on"
        }
      ]
    }
  ]
};

function initialize() {
  markerImg = {
    url: 'https://uploads-ssl.webflow.com/5f58a4616a9e71d63ca059c8/5fa18680b95c219254ad0c9c_place-marker.png',
    size: new google.maps.Size(46, 57),
    anchor: new google.maps.Point(23, 54),
  }

  // Display a map on the page
  mapElem = document.getElementById('map_canvas');
  map = new google.maps.Map(mapElem, mapOptions);
  map.setTilt(45);



  // Loop through our array of races
  for (i = 0; i < races.length; i++) {
   ...