Can ScrollWheel be disabled in a custom street view?

Question

I am building a site and I have a page which takes an address and uses it to generate a 2D roadmap style google-map and then next to it, the street view for that address.

My problem is that these two maps span almost the entire width of the site and the user is likely to have their mouse go over it when scrolling down the page and get confused by their inability to scroll down further (while zooming into a map).

Disabling this for the 2D map was pretty strait forward

    //works to disable scroll wheel in 2D map   
var mapOptions = {
  zoom: 12,
  center: latlng,
  scrollwheel: false,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions );

//not working to disable scroll wheel in panorama
var panoramaOptions = {
  position: results[0].geometry.location,
  scrollwheel: false
};

panorama = new  google.maps.StreetViewPanorama(document.getElementById("map_canvas2"), panoramaOptions );

but the street view does not seem to allow me to disable the scroll wheel using these options and I am not able to find this issue addressed in the google-docs. Anyone know if this CAN be done or suggestions on how to approach it?

Uriia

Answer 1

I am having the same problem, when the user scrolls down using the mouse wheel, the cursor gets caught in the Google street view and starts zooming instead of scrolling down the page.

In Google Maps they provide the scrollwheel property which can disable this, but unfortunately this does not seem to be implemented in Street view.

The only workaround I found as of now is as @bennedich said in the previous answer, I placed an empty/transparent div exactly over the street view div.

I am enabling the controls when the user clicks anywhere over the street view area by using jQuery to hide this empty div (using css visibility property) on mousedown event and when the user moves his mouse out I am placing this empty div back over. Which basically means everytime the user wants to interact with the street view control he has to click it once. It's not the best solution but it's better than getting your mouse caught up when scrolling

Appendant

Answer 2

There was a feature request with Gmaps API v3 issues to add scrollwheel: false to streetview http://code.google.com/p/gmaps-api-issues/issues/detail?id=2557. This is now fixed, just use scrollwheel: false within your StreetViewPanorama options.

Ravish

Thanks for the update! I will add this to my site instead of my workaround. I love when features I need get added to an API ;-) – Uriia

Thanks Frank. Glad they finally added this, one line of code and I can delete all the crappy workaround. – Appendant

This is now the correct answer and should be marked as such. I'm noticing, though, that it eats scroll events and therefore scrolling stops when you get there. While it eliminates the annoying zoom-when-you-get-there bug, it still is, IMHO, a bug. – Irriguous

While this is correct and the option is now available, the scroll wheel doesn't zoom in or out in the panorama, the page scrolling still stops when above the pano. For me at least using Chrome and Safari on macOS Sierra. – Jubilation

Yes, this is still a BUG. With scrollwheel set to false, it should not still capture the mouse scroll event and prevent scrolling on the page as it is doing. – Luciennelucier

Answer 3

Don't know about the javascript way, but with html and css you can place an invisible div with higher z-index over the map/streetview.

Tombac

Great suggestion, would that not disable all interaction with the street view? – Uriia

Answer 4

There is a patch coming up from Google to address this issue.

The fix that works for now is to set the version number explicitly to 3.25 for scrollwheel: false to work.

Example: https://maps.googleapis.com/maps/api/js?key=XXX&v=3.25

Fascia

Wow! thanks for updating this very old question, nice to know they plan to address this. – Uriia

Answer 5

My solution was the following. As soon as the mouse is scrolled on the street view using the "wheel" event, then do the scroll artificially and bring an overlay to the front.

$('.streetViewOverlay').click(function(e) {
   $(this).addClass('streetViewOverlayClicked');
});

document.querySelector('#street-view').addEventListener("wheel", function(evt) {
    $(document).scrollTop($(document).scrollTop() + evt.deltaY);
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});



$('#street-view').mouseleave(function() {
    $('.streetViewOverlay').removeClass('streetViewOverlayClicked');
});


var panorama;
  function initialize() {
    panorama = new google.maps.StreetViewPanorama(
        document.getElementById('street-view'),
        {
          position: {lat: 37.869260, lng: -122.254811},
          pov: {heading: 165, pitch: 0},
          zoom: 1,
          gestureHandling: 'cooperative',
           scrollwheel: false
        });
  }

.streetViewOverlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

.streetViewOverlayClicked {
    z-index: 1;
}

Wye