JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
<div id="derby-to-lima"></div>

CSS

html, body, #derby-to-lima { height: 100%; margin: 0; padding: 0;}

JavaScript

function initialize() {
   var startPoint =  new google.maps.LatLng(53.9834124, -1.5863153); 
  var endPoint = new google.maps.LatLng(-12.0553442, -77.0451853); 
  var middlePoint = new google.maps.geometry.spherical.interpolate(startPoint, endPoint, 0.5); 
    
  var mapOptions = {
    center: { lat: 21.9072222, lng: -47.715},
    zoom: 3
  };
  var map = new google.maps.Map(document.getElementById('derby-to-lima'),
      mapOptions);

var line = new google.maps.Polyline({
    path: [startPoint, endPoint],
    strokeColor: "#008CBA",
    geodesic: true,
    strokeOpacity: 0.5,
    strokeWeight: 5,
    map: map
  });
   
var partialLine = new google.maps.Polyline({
    path: [startPoint, middlePoint],
    strokeColor: "#FF0000",
    geodesic: true,
    strokeOpacity: 0.5,
    strokeWeight: 5,
    map: map
  });
  
};




google.maps.event.addDomListener(window, 'load', initialize);