JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIYgM-yjE-vuW9GsD9uBDAmWslv9KSMPE&amp;amp;sensor=false&amp;amp;libraries=drawing,weather"></script>
	<h1>Click the map to place marker</h1>
		<div id="map"></div>
</br>
		<div><input type="button" value="Split!" class="split"></button></div>
		
		</div>

CSS

body, html{
		color: black;
		display: block;
	}

	#map{
		display: block;
		width: 100%;
		height: 400px;
	}

	.output{
		display: block;
		width: 100%;
	}

JavaScript

var map;
var points = [];
var routeMarkers = new Array(0);
var routePath;
var lineColor = "#ff0000";
var lineWidth = 1;
var listner;
var R = 6353;

$(document).ready(function(){

	initialize();
	
	$(".split").click(function(){
		var mA = routeMarkers[0].getPosition();
		var mB = routeMarkers[1].getPosition();
		points = [];
		splitLine(mA,mB);
	});       
       
});

function initialize() {

   var latlng = new google.maps.LatLng(54.97430382488778, -1.611546277999878);
    var myOptions = {
        zoom: 18,
        center: latlng,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        draggableCursor: 'crosshair'
    };
	
    map = new google.maps.Map(document.getElementById('map'), myOptions);
    listner = google.maps.event.addListener(map, 'click', clickmap);

}

function clickmap(event) {
 
	points.push(event.latLng);
		
	var marker = placeMarker(event.latLng, points.length);	

	routeMarkers.push(marker);

	//remove old polyline first
	if (!(routePath == undefined)) {
		routePath.setMap(null);
	}

	routePath = getRoutePath();
	routePath.setMap(map);
 
}

function placeMarker(location, number) {

   	var markerCount = routeMarkers.length;
	var markerImage = "https://chart.googleapis.com/chart?chst=d_map_xpin_letter&chld=pin|" + parseInt(markerCount + 1) + "|FF0000|000000";
	
    var marker = new google.maps.Marker({
        position: location,
        map: map,
        icon: markerImage,
        title: number.toString(),
        draggable: true
    });

    google.maps.event.addListener(marker, 'dragend', function (event) {	

		var lastPoint = event.latLng;	
		
		var p1 = new google.maps.LatLng(points[0].lat, points[0].lng);
		var p2 = new google.maps.LatLng(lastPoint.lat(), lastPoint.lng());
		
		ClearMap();

		routePath = getRoutePath();
		routePath.setMap(map);
			
		splitLine(p1,p2);
	
    });

    return marker;
}

function getRoutePath() {

    var routePath = new google.maps.Polyline({
    ...