JSFiddle - React, Tailwind, and code Playground

by kaidemarco

HTML

<div id="map"></div>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/googlemaps/v3-utility-library@master/infobox/src/infobox.js"></script>

<link href="https://fonts.googleapis.com/css?family=Permanent+Marker" rel="stylesheet">

CSS

#map {
  height: 100%;
}

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

.action-btns {
  float: left;
  width: 70px;
  overflow: hidden;
  position: relative;
  top: 12px;
  left: 6px;
}

JavaScript

function initMap() {

  var railroadtracksruins = {
    lat: 39.2324422,
    lng: -74.6457388
  };
  var fifthstreetjetty = {
    lat: 39.2768369,
    lng: -74.5625085
  };
  var wonderlandinthewinter = {
    lat: 39.2773975,
    lng: -74.56669
  };
  var jayscrabshack = {
    lat: 39.2802923,
    lng: -74.5741734
  };
  var seventhstreetsurfshop = {
    lat: 39.276653,
    lng: -74.567044
  };
  var northstreetbeach = {
    lat: 39.2829741,
    lng: -74.5560117
  };
  var fifthstreetbeach = {
    lat: 39.276535,
    lng: -74.5633644
  };
  var seventhstreetbeach = {
    lat: 39.275743,
    lng: -74.5655193
  };
  var firststreetbeach = {
    lat: 39.2807806,
    lng: -74.5575138
  };
  var sixteenthstreetbeach = {
    lat: 39.267527,
    lng: -74.5828704
  };
  var waverlybeach = {
    lat: 39.2868131,
    lng: -74.5522344
  };
  var corsonsinletnewjersey = {
    lat: 39.2096407,
    lng: -74.6483227
  };
  var peaceofwood = {
    lat: 39.276478,
    lng: -74.579643
  };
  var surfmall = {
    lat: 39.2731999,
    lng: -74.5769615
  };
  var readyscoffeeshop = {
    lat: 39.2796903,
    lng: -74.5743005
  };
  var seventhstreetsurfshopTwo = {
    lat: 39.2807524,
    lng: -74.5742369
  };
  var baysidesubsdeli = {
    lat: 39.2881256,
    lng: -74.570951
  };
  var ninthstreetbridgepier = {
    lat: 39.289717,
    lng: -74.5840466
  };
  var surferssupplies = {
    lat: 39.254512,
    lng: -74.60714
  };
  var heritagesurfsport = {
    lat: 39.2811096,
    lng: -74.5753237
  };
  var localscoffeesmoothies = {
    lat: 39.276703,
    lng: -74.5668282
  };
  var oceancityskatepark = {
    lat: 39.2829838,
    lng: -74.5714697
  };
  var secondstreetbaypier = {
    lat: 39.2887953,
    lng: -74.5700803
  };

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 14,
    center: jayscrabshack,
    mapTypeId: google.maps.MapTypeId.HYBRID,
    styles: [{
      featureType: "poi",
      elementType: "labels",
      stylers: [{
        visibility:...