JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <div id="map-canvas"></div>
    <div id="menu">
      <b>LatLng2:</b>
      <input id="lat_lon2" type="text" size="60">
    </div>

CSS

html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map-canvas { height: 100% }
      #menu {
        position: absolute;
        top: 0px;
        left: 0px;
        padding: 0px;
        font-family: Arial, sans-serif;
      }

JavaScript

function initializeMap(){

radius = 6371.01; //earth's radius in km
eps = 0.000001;

function d2r(angle) {
  return angle*Math.PI / 180;
}

function r2d(angle) {
  return angle*180/Math.PI;
}

function terminalPt(lat1, lon1, bearing, dist) {
  rlat1 = d2r(lat1);
  rlon1 = d2r(lon1);
  rbearing = d2r(bearing);
  rdist = dist / radius;

  rlat = Math.asin(Math.sin(rlat1) * Math.cos(rdist) + Math.cos(rlat1) * Math.sin(rdist) * Math.cos(rbearing));
  if (Math.abs(Math.cos(rlat)) < eps) {
    rlon = rlon1;
  } else {
    rlon = ((rlon1 - Math.asin( Math.sin(rbearing) * Math.sin(rdist) / Math.cos(rlat)) + Math.PI) % (2*Math.PI)) - Math.PI;
  }

  lat = r2d(rlat);
  lon = r2d(rlon);
  return new google.maps.LatLng(lat, lon);
}

mapCenter = new google.maps.LatLng(36.972061033708556, -109.019539);
sanfran = new google.maps.LatLng(37.7749295, -122.4194155);
var mapOptions = {
center: mapCenter,
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};   

var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

var endpoint = [];

endpoint[0] = terminalPt(sanfran.lat(), sanfran.lng(), -90, 100);
endpoint[1] = terminalPt(sanfran.lat(), sanfran.lng(), -90, 1000);
endpoint[2] = terminalPt(sanfran.lat(), sanfran.lng(), -90, 3000);

for (var i = 0; i < endpoint.length; i++) {
  var tmpMarker = new google.maps.Marker({map: map, position: endpoint[i]});
}

document.getElementById("lat_lon2").value = endpoint;

var impactP = new google.maps.Polyline({
  map: map,
  path: [sanfran,
         endpoint[0],
         endpoint[1],
         endpoint[2]], 
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});
}

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