Disable drag on Google Street View

Question

I want to disable drag on Google Street View (essentially turning street view into a photo). I've tried setting the following options in StreetViewPanorama, but none seem to work:

motionTracking: false,
motionTrackingControl: false,
fullscreenControl: false,
addressControl: false,
panControl: false,
zoomControl: false,
scrollwheel: false,
disableDefaultUI: true,
clickToGo: false,
draggable:false

So instead I've tried a little hack, by overlaying a hidden div like so:

https://jsfiddle.net/2gxqds1n/

using:

.prevent-dragging {
    position: absolute;
    width: 100%;
    height: 400px;
    z-index: 2;
    background-color:rgba(255,255,255,0.5);
}

and:

function initPano() {
  // Note: constructed panorama objects have visible: true
  // set by default.
  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map"),
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );
  
  //disable drag
 svDiv = $("#map");
 svDivHeight = svDiv.height();
 svDivWidth = svDiv.width();                           

 $('<div class="prevent-dragging"></div>').height(svDivHeight).width(svDivWidth).insertBefore(svDiv);
 
  
}

window.initPano = initPano;

It works, but if you start with the screen minimized and then maximize it (to resize/enlarge the streetview) the initial 'hidden div' doesn't expand. So I need to listen for a resize/redraw event, but i can't find it?

I've tried:

google.maps.event.addListener(panorama, 'resize', function () { 
    console.log("resized");
});

But it doesn't fire.

Is there another/better way of achiving this?