JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&amp;sensor=false&amp;ext=.js"></script>
<div id="map-canvas"></div>
<div id="info"></div>

CSS

#map-canvas, html, body {
    height: 95%;
    width: 100%;
}

JavaScript

function initialize() {
 var map = new google.maps.Map(document.getElementById('map-canvas'), {
  center: new google.maps.LatLng(-34.127895, 140.56842),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  var bounds = new google.maps.LatLngBounds();
    
  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
  position: map.getCenter(), 
  map: map
   }); 
    bounds.extend(map.getCenter());
   var south = google.maps.geometry.spherical.computeOffset(marker.getPosition(),3532,180);
    var line1 = new google.maps.Polyline({
        map:map,
        path: [marker.getPosition(),south],
        strokeWeight: 2,
        strokeColor: "#ff0000"
    });
    bounds.extend(south);
  var destination = google.maps.geometry.spherical.computeOffset(south,9211,90);
    bounds.extend(destination);
    var line2 = new google.maps.Polyline({
        map:map,
        path: [south, destination],
        strokeWeight: 2,
        strokeColor: "#ff0000"
    });

    
    var destMarker = new google.maps.Marker({
      position: destination, 
      map:map
  });    
    map.fitBounds(bounds);
    document.getElementById('info').innerHTML = "distance is "+(google.maps.geometry.spherical.computeDistanceBetween(marker.getPosition(), destination)/1000.0).toFixed(2)+"  km";
    var line3 = new google.maps.Polyline({
        map:map,
        path: [marker.getPosition(), destMarker.getPosition()],
        strokeWeight: 2,
        strokeColor: "#0000FF"
    });
}


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