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>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>More Content down here, but you can't scroll to see me... HAHA!</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);
    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
    },
    scrollwheel: false, // If I remove this scrolling occurs in map, if I keep it the page is still not able to be scrolled, why?
    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);