JSFiddle - React, Tailwind, and code Playground

by hlmurray91

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div id="map_canvas"></div>

CSS

#map_canvas {
    width: 100%;
    height: 500px;
}

JavaScript

$(document).ready(function() {
    
    var uk = new google.maps.LatLng(57, -3.1);
    var running = false;
    var a_end_postcode_lat_lng;
    var a_end_lat_lng;
    var b_end_lat_lng;
    var b_end_postcode_lat_lng;
    var bounds;
    var a_end_postcode_marker;
    var a_end_marker;
    var b_end_marker;
    var b_end_postcode_marker;
    var markers = [];
    
    var myOptions = { 
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: uk,
    };
    
     var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
    
    // update the map
    var postcode_1 = 'NR30 2SJ';
    var postcode_2 = 'SS8 7QR';
    var postcode_3 = 'DA3 8NG';
    var postcode_4 = 'HP14 4PB';
    
    var postcode_1_lat_lng = new google.maps.LatLng(52.604609, 1.728312);
    var postcode_2_lat_lng = new google.maps.LatLng(51.517823, 0.621223);
    var postcode_3_lat_lng = new google.maps.LatLng(51.358061, 0.255822);
    var postcode_4_lat_lng = new google.maps.LatLng(51.66338, -0.755061);
    
    if (typeof flightPath !== 'undefined') {
        flightPath.setMap(null); // Remove polyline
    }

   if (typeof flightPathProgress !== 'undefined') {
       flightPathProgress.setMap(null); // Remove polyline
   }
    
    // Centre map on these points
    bounds = new google.maps.LatLngBounds();
    bounds.extend(postcode_1_lat_lng);
    bounds.extend(postcode_2_lat_lng);
    bounds.extend(postcode_3_lat_lng);
    bounds.extend(postcode_4_lat_lng);
    map.fitBounds(bounds);
    
    // The grey outline path
    flightPath = new google.maps.Polyline({
        path: [postcode_1_lat_lng, postcode_2_lat_lng, postcode_3_lat_lng, postcode_4_lat_lng],
        strokeColor: '#666',
        strokeOpacity: 0.5,
        strokeWeight: 4,
        geodesic: true,
        zIndex: 1
    });

    /*
    // The red progress path
    flightPathProgress = new google.maps.Polyline({
        path: [postcode_1_lat_lng, postcode_2_lat_lng, postcode_3_lat_lng,...