Google Maps Street View Panorama scrollwheel false still captures scroll wheel

Question

Google Maps Street View Panorama scrollwheel false still captures scroll wheel

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

jsfiddle of my sad attempt to simulate how a normal Google map does it by embedding the z-index element on top of it so that it can scroll when above StreetViewPanorama, but this example cannot drag StreetView, as you can drag a regular map: https: / /jsfiddle.net/Ltjz44gg/3/

Well, battled this scroll issue in viewing Google Maps in StreetViewPanorama. Since I use both the main map and StreetViewPanorama. Here is the basic information about 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 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);

scrollwheel -, StreetViewPanorama. , div , , Google , :

id of map-street - , StreetViewPanorama Map.

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>

:

.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 &#8984; + 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));
});

jquery , google , , , google ( ), . , , , , , css--, jQuery, .

, , scrollwheel: false - - , StreetViewPanorama Map (map-street) . , , Google Maps, , scrollwheel: false. scrollwheel: false, Panorama View .

StreetViewPanorama ( StreetView)?

, , Google Maps, ( ), (, Google )?

, . StreetViewPanorama, block-scrolling div, , , ( StreetViewPanorama).

+6

jquery google-maps google-maps-api-3

Solomon Closson 05 . '17 6:13

1

Dima Kurilo · Accepted Answer · 2017-09-13T03:01:08+0000

, .
https://jsfiddle.net/Ltjz44gg/19/

StreetViewPanorama gestureHandling mouseout. , "" .

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

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 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 &#8984; + 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();
        }
      }
    });
  });

});

Google Maps Street View Panorama scrollwheel false still captures scroll wheel

More articles: