JSFiddle - React, Tailwind, and code Playground

by Mukesh Yadav

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCeylxCgifTyq8gAfFoY81OJrs1DB8lCQk&amp;callback=initMap"></script>
<div id="map"></div>
<div id="legend">
  <h3>Legend</h3></div>
<script href="https://maps.googleapis.com/maps/api/js?key=AIzaSyCeylxCgifTyq8gAfFoY81OJrs1DB8lCQk&callback=initMap"></script>

CSS

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

JavaScript

function ShowHide(group) {
  alert('Show or hide this group:' + group);
}
var map;
var markers = [{
  heading: 'East Tilbury Jetty - Gravesend Reach North ',
  src: '/assets/img/maps/',
  description: 'Text of Alans choice can go here Text of Alans choice can go here'
}, {
  heading: 'Denton Wharf - Gravesend Reach South',
  src: '/assets/img/maps/dentonwharf.jpg',
  description: 'Text of Alans choice can go here Text of Alans choice can go here'
}];

function addMarker(marker) {
  var contentString = '<div id="content"><div id="siteNotice"></div>' +
    '<h1 id="firstHeading" class="firstHeading">' + marker.heading + '</h1>' +
    '<div id="bodyContent">' +
    '<p><img src="' + marker.src + '" alt=""></p>' +
    '<p>' + marker.description + '</p>' +
    '</div>' +
    '</div>';

  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.453430, 0.403104),
    map: map,
    title: 'Gravesend Reach North '
  });

  marker.infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  marker.addListener('mouseover', function() {
    this.infowindow.open(map, this);
  });
  marker.addListener('mouseout', function() {
    this.infowindow.close()
  });
}

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: new google.maps.LatLng(51.4851353, 0.3966108),
    mapTypeId: 'roadmap',
    zoomControl: true
  });

  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var icons = {
    PLA: {
      name: 'PLA Berths and Jettys',
      icon: iconBase + 'info-i_maps.png'
    },
    Jettys: {
      name: 'Jettys, Wharfs, Piers and Causways',
      icon: iconBase + 'info-i_maps.png'
    },
    Reachs: {
      name: 'Reachs, Buoys and Points',
      icon: iconBase + 'info-i_maps.png'
    },
    Places: {
      name: 'Places, Bridges and clubs',
      icon: iconBase + 'info-i_maps.png'
    }
  };


	for(var i = 0, len = markers.length; i++){
  	addMarker(markers[i]);
  }

  var...