JSFiddle - React, Tailwind, and code Playground

by Lawrence Ross

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&amp;key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>

CSS

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

JavaScript

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay;

  directionsDisplay = new google.maps.DirectionsRenderer({
    polylineOptions: {
      strokeColor: "red"
    }
  });

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 13,
    center: new google.maps.LatLng(25.03086141, -77.39945412),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  directionsDisplay.setMap(map);

  var locations = [
    ['The Reef Atlantis', 25.084536, -77.330704, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/hotel.png'],
    ['Oasis Restaurant & Bar', 25.003246, -77.4673455, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
    ['Carmines', 25.08668, -77.32665, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
    ['Dune', 25.0829234, -77.3114754, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
    ['Montagu Gardens', 25.0721743, -77.3091388, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
    ['Travellers Rest', 25.0647862, -77.4721588, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/food.png'],
    ['Lynden Pindling International Airport', 25.0439288, -77.4655212, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/airport.png'],
    ['The Royal Bank of Canada', 25.0347498, -77.5131047, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
    ['Scotia Bank', 25.0194408, -77.3810372, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
    ['CIBC First Caribbean', 25.0765015, -77.3386342, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
    ['Bahamas Development', 25.0699435, -77.3915533, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bank.png'],
    ['Cozy Corner Pub', 25.074803, -77.4294573, 'https://raw.githubusercontent.com/bjhm/ajax-dummyJson/master/bar.png'],
    ['Pirates Pub and...