JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.google.com/maps/api/js?key=AIzaSyCbh2cf4AhXN0PpVT9Jq0s-ToZAxtZueoA"></script>
<div class="container">
<div id="mapID" class="col-xs-24 col-md-12"></div>
<div id="map-street" class="col-xs-24 col-md-12"><div class="block-scrolling fade"><p></p></div></div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>More Content down here, You can scroll to see me now, but you can't manage the streetview map without holding down the CTRL or CMD Keys.  You can't drag the map like you can with the regular view anymore either.</p>
</div>

CSS

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.block-scrolling {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    z-index: 2;
    -webkit-transition: (all .25s linear);
    -moz-transition:    (all .25s linear);
    -ms-transition:     (all .25s linear);
    -o-transition:      (all .25s linear);
}
.block-scrolling p {
        position: relative;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 26px;
    }

div[class^='col'], div[class*=' col'] {
  height: 300px;
}

.col-xs-24 {
   float: left;
   width: 100%;
}

@media (min-width: 992px) {
  .col-md-12 {
    float: left;
    width: 50%;
  }
}

JavaScript

var theMapOptions =
{
    backgroundColor     : "#B0C0C6",
    zoom                : 16,
    maxZoom             : 20,
    minZoom             : 2,
    disableDefaultUI    : true,
    center              : new google.maps.LatLng(37.869085, -122.254775),
    mapTypeId           : google.maps.MapTypeId.ROADMAP,
    mapTypeControl      : false,
    zoomControl         : true,
    panControl          : true, 
    streetViewControl   : true,

    panControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },

    zoomControlOptions: {
        style   : google.maps.ZoomControlStyle.LARGE,
        position: google.maps.ControlPosition.TOP_LEFT
    }
};

var theStreetMapOptions = 
{
    position    : new google.maps.LatLng(37.869085, -122.254775),
    pov: {
        heading: 135,
        pitch: -10
    },
    motionTrackingControlOptions: {
        position: google.maps.ControlPosition.LEFT_BOTTOM
    }
};

var theMap = new google.maps.Map(document.getElementById('mapID'), theMapOptions);
// A custom styles json array (not included, since it's irrelevant)
// theMap.setOptions({styles: styles});

var theMapMarkerOptions = 
{
    map         : theMap,
    position    : new google.maps.LatLng(37.869085, -122.254775),
    draggable   : false,
    visible     : true
}

var theMapMarker = new google.maps.Marker(theMapMarkerOptions);
theMapMarker.Map = theMap;

theMapMarker.setMap(theMap);

var theStreetMap = new google.maps.StreetViewPanorama(document.getElementById('map-street'), theStreetMapOptions);
theMap.setStreetView(theStreetMap);

jQuery(document).ready(function($) {
	// Need to simulate scroll over google map for StreetViewPanorama, so this code is needed!
$(document).on('keydown keyup', function(e) {
    var io = e.type == 'keydown' ? 0 : 1;

    if ((e.ctrlKey || e.metaKey) && $('.block-scrolling').data('mouseover')) {
        e.preventDefault();

        console.log($('.block-scrolling').data('mouseover'));

        if (io === 0)
           ...