JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script>
  var map;
  var iconBase = 'http://gravesendrnli.org/assets/img/';
  var icons = {
    PLA: {
      name: 'PLA Berths and Jettys',
      icon: iconBase + 'berth.png',
      show: !1,
      markersData: [{
        title: 'Gravesend Reach North',
        lat: 51.453430,
        lon: 0.403104,
        h1: 'East Tilbury Jetty - Gravesend Reach North',
        img: {
          url: 'http://gravesendrnli.org/assets/img/maps/easttilburyjetty.jpg',
          alt: 'easttilburyjetty.jpg'
        },
        msg: 'Text of Alans choice can go here Text of Alans choice can go here.'
      }],
      markers: []
    },
    Jettys: {
      name: 'Jettys, Wharfs, Piers and Causways',
      icon: iconBase + 'slipway.png',
      show: !0,
      markersData: [{
        title: 'Gravesend Reach South',
        lat: 51.444588,
        lon: 0.395218,
        h1: 'Denton Wharf - Gravesend Reach South',
        img: {
          url: 'http://gravesendrnli.org/assets/img/maps/dentonwharf.jpg',
          alt: 'dentonwharf.jpg'
        },
        msg: 'Text of Alans choice can go here Text of Alans choice can go here.'
      }],
      markers: []
    },
    Reachs: {
      name: 'Reachs, Buoys and Points',
      icon: iconBase + 'lateral.png',
      show: !1,
      markersData: [{
        key: 'Reachs',
        title: 'Gravesend Reach South',
        lat: 51.444340,
        lon: 0.398104,
        h1: 'Port Health Pier - Gravesend Reach South',
        img: {
          url: 'http://gravesendrnli.org/assets/img/maps/porthealthauthority.jpg',
          alt: 'porthealthauthority.jpg'
        },
        msg: 'Text of Alans choice can go here Text of Alans choice can go here.'
      }],
      markers: []
    },
    Places: {
      name: 'Places, Bridges and clubs',
      icon: iconBase + 'info.png',
      show: !1,
      markersData: [{
        title: 'Gravesend Reach South',
        lat: 51.445251,
        lon: 0.401334,
        h1: 'Clubbs Jetty - Gravesend Reach South',
        img: {
 ...

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;
}

#legend {
  font-family: Arial, sans-serif;
  background: #fff;
  padding: 10px;
  margin: 10px;
  border: 3px solid #000;
}

#legend h3 {
  margin-top: 0;
}

#legend img {
  vertical-align: middle;
}