Отключение зума жестами

Управление жестами масштабирования в Google Maps JavaScript API опирается на набор параметров конфигурации объекта карты, которые контролируют поведение пользовательского ввода: прокрутку колесом мыши, жесты на сенсорных экранах, двойной клик и инерционное масштабирование. Гибкая настройка позволяет адаптировать карту под интерфейсы киосков, мобильных приложений, аналитических панелей и встраиваемых виджетов, где стандартное поведение масштабирования может быть нежелательным.

В Google Maps JavaScript API масштабирование карты может быть вызвано несколькими способами:

  • колесо мыши (scroll wheel)
  • жесты на тачпаде или сенсорном экране (pinch-to-zoom)
  • двойной клик мышью
  • программное изменение zoom через API
  • клавиатурные сокращения (в некоторых конфигурациях)

Каждый из этих каналов ввода управляется отдельными параметрами, однако ключевую роль в отключении именно жестов играет настройка gestureHandling, а также дополнительные флаги, связанные с zoom.

Полное отключение жестов масштабирования

Наиболее радикальный способ отключить любое интерактивное масштабирование через жесты — использование параметра:

gestureHandling: "none"

Данная настройка полностью блокирует:

  • pinch-to-zoom на мобильных устройствах
  • масштабирование колесом мыши (в сочетании с другими параметрами)
  • инерционные жесты прокрутки, влияющие на масштаб
  • жестовое управление на трекпадах

При этом карта остаётся визуально интерактивной в части отображения, но пользователь теряет возможность изменять масштаб вручную.

Пример конфигурации:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.0196, lng: 66.9237 },
  zoom: 6,
  gestureHandling: "none"
});

Такой режим применяется в интерфейсах, где карта выполняет исключительно информационную функцию, например в статичных дашбордах или при встраивании в презентационные панели.

Отключение масштабирования колесом мыши

Отдельно от жестов сенсорных экранов управляется поведение колеса мыши:

scrollwheel: false

Этот параметр предотвращает изменение масштаба при прокрутке колесом, но не всегда блокирует pinch-жесты на мобильных устройствах.

Пример:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.0196, lng: 66.9237 },
  zoom: 6,
  scrollwheel: false
});

В современных версиях API поведение scrollwheel частично перекрывается gestureHandling, поэтому при комбинировании параметров приоритет обычно отдаётся общей стратегии жестов.

Управление режимами gestureHandling

Параметр gestureHandling определяет стратегию взаимодействия карты с пользовательскими жестами. Он принимает несколько значений:

none

Полное отключение жестов масштабирования и перемещения.

gestureHandling: "none"

cooperative

Жесты масштабирования и перемещения требуют дополнительного действия пользователя (например, удержания клавиши Ctrl или Command на десктопе).

gestureHandling: "cooperative"

Этот режим снижает случайные изменения масштаба при прокрутке страницы.

greedy

Все жесты немедленно применяются к карте, без ограничений.

gestureHandling: "greedy"

Используется в полноэкранных картах, где карта является основным элементом интерфейса.

auto

API самостоятельно определяет поведение в зависимости от устройства и окружения.

gestureHandling: "auto"

Часто применяется как значение по умолчанию.

Отключение двойного клика

Двойной клик часто используется для увеличения масштаба. Для его отключения применяется:

disableDoubleClickZoom: true

Это предотвращает резкие скачки zoom при взаимодействии с картой мышью.

Пример:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.0196, lng: 66.9237 },
  zoom: 6,
  disableDoubleClickZoom: true
});

В интерфейсах, где двойной клик используется для других действий (например, добавление маркера или выбор точки), отключение масштабирования является обязательным.

Комбинирование параметров для полного контроля

Для полного отключения всех пользовательских способов изменения масштаба обычно комбинируются несколько параметров:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.0196, lng: 66.9237 },
  zoom: 6,
  gestureHandling: "none",
  scrollwheel: false,
  disableDoubleClickZoom: true
});

Такая конфигурация блокирует основные механизмы:

  • жесты масштабирования на мобильных устройствах
  • прокрутку колесом мыши
  • двойной клик

Дополнительно может применяться отключение клавиатурного управления:

keyboardShortcuts: false

Это предотвращает изменение масштаба через клавиши + и -.

Поведение на сенсорных устройствах

На мобильных устройствах основным способом масштабирования является pinch-to-zoom. Его поведение напрямую зависит от gestureHandling.

При значении:

  • none — жесты полностью игнорируются
  • cooperative — масштабирование возможно только при дополнительном взаимодействии
  • greedy — масштабирование происходит свободно

В условиях мобильных интерфейсов полное отключение масштабирования может привести к снижению удобства навигации, поэтому чаще используется ограничение через cooperative-режим.

Влияние на UX и взаимодействие с картой

Отключение жестов масштабирования существенно меняет модель взаимодействия с картой:

  • уменьшается вероятность случайных изменений масштаба при прокрутке страницы
  • упрощается поведение встроенных карт в ограниченных контейнерах
  • повышается предсказуемость интерфейса
  • теряется возможность быстрого изучения карты пользователем

Особенно критично это в случаях, когда карта занимает часть страницы, а не является центральным элементом интерфейса.

Поведение scrollwheel в различных сценариях

Исторически параметр scrollwheel использовался как основной способ отключения масштабирования через мышь. Однако в современных реализациях он работает в связке с gestureHandling.

Типичные сценарии:

  • scrollwheel: false + gestureHandling: auto — частичное отключение прокрутки
  • scrollwheel: false + gestureHandling: greedy — возможны исключения в зависимости от устройства
  • gestureHandling: none — полностью перекрывает поведение scrollwheel

Таким образом, gestureHandling имеет более высокий приоритет.

Управление программным масштабированием

Даже при отключённых жестах масштабирование остаётся доступным через API:

map.setZoom(10);

или плавное изменение:

map.setOptions({ zoom: 8 });

Это позволяет реализовать контролируемую навигацию через внешние элементы интерфейса: кнопки, ползунки, списки объектов.

Типичные ошибки конфигурации

При отключении жестов масштабирования часто встречаются следующие проблемы:

  • использование только scrollwheel: false при активном pinch-zoom
  • отсутствие disableDoubleClickZoom, приводящее к неожиданным скачкам масштаба
  • неправильная комбинация gestureHandling: "cooperative" без учета десктопных сценариев
  • попытка блокировать жесты через DOM-события вместо API настроек

Корректная настройка всегда должна опираться на встроенные параметры API, а не на внешние обработчики событий.

Сценарии применения ограниченного масштабирования

Отключение или ограничение жестов масштабирования применяется в следующих типах интерфейсов:

  • информационные панели с фиксированным отображением геоданных
  • карты в модальных окнах
  • печатно-ориентированные preview-интерфейсы
  • аналитические дашборды с фиксированным уровнем zoom
  • киоски самообслуживания с ограниченным вводом

В таких системах управление масштабом делегируется интерфейсным элементам, а не пользовательским жестам.

Оглавление