Google Maps Street View Panorama scrollwheel false still catches scrollwheel

Question

jsfiddle of Google Street View Problem here: https://jsfiddle.net/d8qgfcvf/4/

jsfiddle of my sad attempt to simulate how the Regular Google Map does this, by implementing a z-index element on top of it to be able to scroll the page when over the StreetViewPanorama, but this example is not able to drag the StreetView like you can drag the regular map: https://jsfiddle.net/Ltjz44gg/3/

Ok, have been battling with this scrollwheel problem in StreetViewPanorama Google Maps view. As I am using both the basic map, and the StreetViewPanorama. Here is the basics of my code:

var theMapOptions =
{
    backgroundColor     : "#B0C0C6",
    zoom                : 16,
    maxZoom             : 20,
    minZoom             : 2,
    disableDefaultUI    : true,
    center              : new google.maps.LatLng(Property.map['lat'], Property.map['lng']),
    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(Property.map['lat'], Property.map['lng']),
    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(Property.map['lat'], Property.map['lng']),
    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);

However, when outputting this, the scrollwheel is still being caught and am not able to scroll the webpage anymore if my mouse is inside of the StreetViewPanorama Map. So I have went down another path here to try and set an overlay div on the map to act in the same way as the basic Google Map does when scrolling over it, and have done this:

id of map-street is the container which holds the StreetViewPanorama Map btw.

html:

<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>

less:

.transition (@transition) {
    -webkit-transition: @transition;
    -moz-transition:    @transition;
    -ms-transition:     @transition;
    -o-transition:      @transition;
}

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

jquery:

// 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)
            $('.block-scrolling').css({zIndex: -1});
        else
            $('.block-scrolling').removeClass('in').css({zIndex: 2});

        return false;
    }
    else
        $('.block-scrolling').css({zIndex: 2});

    return true;
});


$(".block-scrolling").mouseenter(function() {
    clearTimeout($(this).data('timeoutId'));
    $(this).data('mouseover', true);
}).mouseleave(function(){
    var scrollingElement = $(this),
        timeoutId = setTimeout(function(){
            scrollingElement.data('mouseover', false);
        }, 50);
    //set the timeoutId, allowing us to clear this trigger if the mouse comes back over
    scrollingElement.data('timeoutId', timeoutId); 
});

$(".block-scrolling").on('scroll wheel DOMMouseScroll mousewheel touchstart', function(e) {

    var $this = $(this),
        $text = e.type == 'touchstart' ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map');

    clearTimeout($.data(this, 'scrollTimer'));
    $this.find('p').html($text);
    $this.addClass('in');

    var scrollingElement = $(this);

    if (e.type == 'touchstart')
    {
        if (e.hasOwnProperty('touches') && e.touches.length && e.touches.length > 1)
            $this.css({zIndex: -1});
    }

    $.data(this, 'scrollTimer', setTimeout(function() {
        scrollingElement.removeClass('in');
    }, 2000));
});

The jquery code is very close to what google maps provides for the basic map when scrolling over it, however, seems that the basic google map is allowing you to drag (on the map) even when the overlay is visible. This part I can not, for the life of me, figure out, because if I disable css pointer-events than the other jquery mouse events don't work.

What would be preferable here, would be if the scrollwheel: false actually worked and allowed the webpage to still be scrolled if the mouse is over that StreetViewPanorama Map element (map-street) when scrolling. It would be nice if it worked the same way the Google Maps actually worked, when displaying a normal map actually, where there is no need for scrollwheel: false at all on this. But without scrollwheel: false, the Panorama View catches the mouse into a scroll on that view.

How to either disable the scrollwheel on StreetViewPanorama and not catch the mouse on scroll (while still allowing the StreetView map to be managed)?

Or

How to keep the scrolling on the streetview but do like Google Maps does and have an overlay (while still allowing the page to be scrolled), but still allow the map to be dragged (like the exact way the basic google map does)?

Would prefer an answer to the 2nd question, but either will do. If there was a way to drag the StreetViewPanorama though the block-scrolling div element that would probably fix it also (if there is no way to do this via StreetViewPanorama options).

Answer 1

I changed your code to make it working.
https://jsfiddle.net/Ltjz44gg/19/

StreetViewPanorama don't understand gestureHandling option and it can't listen for mouseout. So you only can make "weird" solution.

Something like this:
Updated 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);
    opacity: 0;
    pointer-events: none;
}
.block-scrolling.show{
  opacity: 1;
}
.block-scrolling.hide{
  opacity: 0;
}
.block-scrolling p {
        position: relative;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        color: white;
        font-size: 26px;
        -webkit-user-select: none;  
        -moz-user-select: none;    
        -ms-user-select: none;      
        user-select: none;
    }

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%;
  }
}

Updated JS:

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($) {
  var ctrl = false, mouseover = false;
  var waitForScroll = function() {
    $('.block-scrolling').removeClass('show hide');
  };
  var disableScroll = function() {
    $('.block-scrolling').removeClass('hide').addClass('show');
  };
  var enableScroll = function() {
    $('.block-scrolling').removeClass('show').addClass('hide');
  };

  theMap.addListener('idle', function(e){     
    $('#map-street .widget-scene').on('scroll wheel DOMMouseScroll mousewheel touchstart touchmove', function(e) {
      var $overlay = $('.block-scrolling'),
        $text = e.type.indexOf('touch') >=0 ? 'Use two fingers to move the map' : (e.type == 'wheel' ? 'Use ⌘ + scroll to zoom the map' : 'Use Ctrl + scroll to zoom the map');
       $overlay.find('p').html($text);
      if (ctrl || (e.type.indexOf('touch') >=0 && e.hasOwnProperty('touches') && e.touches.length > 1)) {
        enableScroll();
      } else {
        e.stopPropagation();
        disableScroll();
      }
    }).on('mouseenter', function(e){
      $(this).focus();
    }).on('mouseleave touchend', function(e){
      waitForScroll();
    }).on('keydown keyup', function(e) {
      var io = e.type == 'keydown' ? 0 : 1;
      if ((e.ctrlKey || e.metaKey || e.which === 17 || e.which === 91)) {
        ctrl = false;
        if (io === 0) {
          ctrl = true;
          enableScroll();
        }
        if (io === 1) {
          waitForScroll();
        }
      }
    });
  });

});