JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?libraries=geometry"></script>
<body>


  <div id="info" style="width 300px;height:auto;">div info</div>
  <div id="map_canvas" style="width 300px;height:200px;">div map_canvas</div>
  <div id="log2" style="width 600px;height:200px;">div log2</div>
  <div id="pano" style="width: 600px; height: 200px;float:left;">div pano</div><br>
  <!-- Replace the value of the key parameter with your own API key. -->
</body>
<script async src="https://maps.googleapis.com/maps/api/js">


</script>

JavaScript

var coords = {lat: 40.1894994,lng: -76.1800279 };
var address = '275 N Reading Rd, Ephrata, PA 17522';
var map;
var panorama;
var direction;

function geocoding() {
  var geocoder = new google.maps.Geocoder();
  var myStreetView = null;
  var marker = null;

  geocoder.geocode({
      'address': address
    },
    function geo(results, status) {
    debugger;
      if (status == google.maps.GeocoderStatus.OK) {

        myStreetView = new google.maps.StreetViewPanorama(document.getElementById("map_canvas"));
        myStreetView.setPosition(coords);

        google.maps.event.addListenerOnce(myStreetView, 'status_changed', function() {

         window.direction = google.maps.geometry.spherical.computeHeading(myStreetView.getLocation().latLng, results[0].geometry.location);
         initMap();


          var SVstatus = myStreetView.getStatus();

          document.getElementById('info').innerHTML = "Street View Status = " + SVstatus + "	<br>Calculated heading = " + window.direction + " <br>Coords streetview = " + results[0].geometry.location + "<br>Coords panorama = " + myStreetView.getLocation().latLng; //heading works 100%

          myStreetView.setOptions({
            disableDefaultUI: true
          })
          myStreetView.setPov({
            heading: window.direction, //heading works 100%
            pitch: 0,
          });

          setTimeout(function() {
            marker = new google.maps.Marker({
              position: results[0].geometry.location,
              map: myStreetView,
              title: address,
            });

            if (marker && marker.setMap) marker.setMap(myStreetView);
          }, 0);
        });

      } else {
        alert("Geocode was not successful: " + status);
      }
		
    });
    

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



function initMap() {
  var sv = new google.maps.StreetViewService();
  panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
  // Initial...