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="40">
    </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(){

mapCenter = new google.maps.LatLng(36.033036, -93.8655744);
defaultStart = new google.maps.LatLng(37.470625, -122.266823);   
var mapOptions = {
center: mapCenter,
zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP
};   

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

var R = 6378137;
var dis = 6000;
var bearing = 360; 
var lat2 = Math.asin(Math.sin(37.470625)*Math.cos(dis/R)+Math.cos(37.470625)*Math.sin(dis/R)*Math.cos(bearing) );

var lon2 = -122.266823 + Math.atan2(Math.sin(bearing)*Math.sin(dis/R)*Math.cos(37.470625),Math.cos(dis/R)-Math.sin(37.470625)*Math.sin(-122.266823));

document.getElementById("lat_lon2").value = "(" + lat2 + ", " + lon2 + ")";

var impactP = new google.maps.Polyline({
  map: map,
  path: [defaultStart,
         new google.maps.LatLng(37.3677839,-102.1410613)], 
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2
});

}

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