2

How can I disable keyboard shortcut zooming in Google Street View?

According to the JavaScript API, setting keyboardShortcuts: false for google.maps.MapOptions should prevent any control via the keyboard, but zooming still works using the + and - keyboard shortcuts.

var map = new google.maps.Map(document.getElementById('map'), {
  center: fenway,
  zoom: 14,
  keyboardShortcuts: false /* should prevent +/- zooming */
});

Here is an example fiddle.

Edit: as geocodezip points out, keyboardShortcuts is only an option for the overhead map. google.maps.StreetViewPanoramaOptions doesn't have these options. Could the keyboard shortcuts be turned off manually by disabling the events?

Johann
  • 31
  • 5
  • 1
    Welcome to Stack Overflow - nice to have you. Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) and [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) to help keeping Stack Overflows content on the highest possible level and increase your chances getting an appropriate answer. Please paste here the code you have right now. – sebast26 Sep 11 '17 at 17:25
  • `keyboardShortcuts: false` controls zooming for the map. The StreetViewPanorama doesn't seem to have the equivalent control. – geocodezip Sep 11 '17 at 17:37
  • @geocodezip good point. Could the shortcuts still be disabled manually using preventDefault or something similar on the key events? – Johann Sep 11 '17 at 17:56

1 Answers1

2

The API doesn't seem to allow preventing Google Maps from registering the keyboard event handlers, but you can intercept the events and stop them propagating:

window.addEventListener(
  'keydown',
  (event) => {
    if (
      (
        // Change or remove this condition depending on your requirements.
        event.key === 'ArrowUp' || // Move forward
        event.key === 'ArrowDown' || // Move forward
        event.key === 'ArrowLeft' || // Pan left
        event.key === 'ArrowRight' || // Pan right
        event.key === '+' || // Zoom in
        event.key === '=' || // Zoom in
        event.key === '_' || // Zoom out
        event.key === '-' // Zoom out
      ) &&
      !event.metaKey &&
      !event.altKey &&
      !event.ctrlKey
    ) {
      event.stopPropagation()
    };
  },
  { capture: true },
);

The above will block moving, panning, and zooming via the keyboard, but you can adjust if if you just want to block some shortcuts. The key is the capture option for addEventListener(), which gives this event hander higher precedence.

Blieque
  • 670
  • 7
  • 28