JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas" style="width: 400px; height: 300px"></div>
<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;"></div>
<div id="info" ></div>

CSS

html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px
}

JavaScript

function initialize() {
    var fenway = new google.maps.LatLng(42.345573, -71.098326);
    var mapOptions = {
        center: fenway,
        zoom: 19
    };
    var lookat = new google.maps.LatLng(45.497671, -73.565611);

    var map = new google.maps.Map(
    document.getElementById('map-canvas'), mapOptions);
    var SVlayer = new google.maps.StreetViewCoverageLayer();
    SVlayer.setMap(map);

    var streetViewMaxDistance = 50;

    var point = new google.maps.LatLng(45.497671, -73.565611);

    var marker = new google.maps.Marker({
        position: lookat,
        map: map
    });
    map.setCenter(lookat);
    var streetViewService = new google.maps.StreetViewService();

    streetViewService.getPanoramaByLocation(lookat, streetViewMaxDistance, function (streetViewPanoramaData, status) {

        if (status === google.maps.StreetViewStatus.OK) {
            var oldPoint = point;
            point = streetViewPanoramaData.location.latLng;
            var SVmarker = new google.maps.Marker({ position: streetViewPanoramaData.location.latLng, map: map});


            var heading = google.maps.geometry.spherical.computeHeading(streetViewPanoramaData.location.latLng, lookat);
            document.getElementById('info').innerHTML = "heading="+heading;
            var panoramaOptions = {
                position: oldPoint,
                pov: {
                    heading: heading,
                    zoom: 1,
                    pitch: 0
                },
                zoom: 1
            };
              var lineSymbol = {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
  };
            var polyline = new google.maps.Polyline({map:map,path:[streetViewPanoramaData.location.latLng, lookat], icons: [{
      icon: {
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
      },
      offset: '100%'
    }]});
            var myPano = new google.maps.StreetViewPanorama(
            document.getElementById('pano'),
            panoramaOptions);
           ...