How to disable Google Street View dragging / swiping

Question

How to disable Street View dragging / swiping? This is important especially on mobile devices, where the both the Street View and the whole web page are scrolled by swiping on the screen with a finger. In fact if you try to scroll the page touching with finger a point where you have a Street view, you will scroll the Street view instead of the page. If the Street view is full-width this may be an usability issue.

Answer 1

Google API does not provide this option, but I managed it to work by placing an invisible div on top of the Street view, preventing the underlying Street View receiving evented. I created a toggle button "Drag Street View / Drag web page). The button can dynamically show/hide Street view controls according to the enabled/disabled state of the Street View.

Example here: http://www.genovaperte.it/item/antico-forno-ursida/ Please see it from a mobile touch device because the toggle button is needed and shown, in my context, only for mobile touch devices. In desktop devices Street View is Always navigable by default because there aren't issues with this.

Outline of the code (here using jQuery and Modernizr):

CSS:

.draggable-street-view-toggle-button { cursor: pointer; background-color: #fff; border: solid 2px @firstThemeColor; z-index: 1000; position: absolute; right: 40px; padding: 10px; } /* the toggle button appearance. right = 40px to not overlap the close button */
.prevent-dragging { position: absolute; width: 100%; height: 400px; z-index: 999; } /* the hidden layer to prevent draggin events reach the underlying Street View */
#directory-main-bar.hide-gmnoprint .gmnoprint { display: none; } /* class dynamically added/removed to toggle controls */

HTML:

<div id="directory-main-bar">
... Here you have to initialize your Street view via Google API or with your preferred jQuery plugin like GMAP3 ...
I recommend these options: defaultDisableUI = false, enableCloseButton : true, and zoomControl : Modernizr.touch ? false : true,
</div>

JS:

function toggleStreetViewControls(state) {
    mapDiv = $("#directory-main-bar");
    if(!state) {
        $('<div class="prevent-dragging"></div>').height(400).insertBefore(mapDiv); /* 400 is the Street View height you've chosen when setupping it */
        mapDiv.addClass('hide-gmnoprint');
    }
    else {
        $('.prevent-dragging').remove();
        mapDiv.removeClass('hide-gmnoprint');
    }
}

if (Modernizr.touch){
    var swDraggableButton = $('<div class="draggable-street-view-toggle-button"></div>').insertBefore(mapDiv);
    $('<div class="prevent-dragging"></div>').height({!$themeOptions->directoryMap->mapHeight}).insertBefore(mapDiv);
        mapDiv.addClass('hide-gmnoprint');
    }
    swDraggableButton.click(function () {
            if($(this).hasClass('active')){
                    $(this).removeClass('active').addClass('inactive').text({__ 'Drag web page'});
                    toggleStreetViewControls(false);
            } else {
                    $(this).removeClass('inactive').addClass('active').text({__ 'Drag Street view'});
                    toggleStreetViewControls(true);
            }
    });
}