Отключение стандартных контролов

В Google Maps JavaScript API предусмотрена система стандартных элементов управления картой (UI controls), включающая масштабирование, переключение типа карты, Street View, полноэкранный режим и другие компоненты интерфейса. При разработке кастомных картографических решений часто требуется полный контроль над интерфейсом, что приводит к необходимости отключения стандартных элементов управления.

Основной механизм управления UI реализуется через параметры объекта конфигурации карты при инициализации.

Полное отключение стандартных контролов

Для удаления всех встроенных элементов управления используется параметр disableDefaultUI:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 40.7128, lng: -74.0060 },
  zoom: 10,
  disableDefaultUI: true
});

При установке disableDefaultUI: true отключаются все стандартные контролы одновременно, включая масштаб, переключатель типов карт, Street View и другие элементы интерфейса.

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

Пошаговое управление отдельными элементами интерфейса

Вместо полного отключения UI часто требуется более тонкая настройка, при которой сохраняются только необходимые элементы.

Каждый контрол может быть отключён отдельно через соответствующие параметры:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 48.8566, lng: 2.3522 },
  zoom: 12,
  zoomControl: false,
  mapTypeControl: false,
  streetViewControl: false,
  fullscreenControl: false
});

Основные параметры управления

  • zoomControl — управление отображением кнопок увеличения и уменьшения масштаба
  • mapTypeControl — переключение между режимами карты (roadmap, satellite и др.)
  • streetViewControl — включение элемента Pegman для Street View
  • fullscreenControl — кнопка полноэкранного режима
  • rotateControl — управление поворотом карты (актуально для наклонённых и 3D-режимов)

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

Контроль поведения интерфейса через опции UI

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

Управление жестами

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 51.5074, lng: -0.1278 },
  zoom: 11,
  gestureHandling: "none"
});

Параметр gestureHandling определяет, как карта реагирует на пользовательские действия:

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

Комбинирование настроек UI

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

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 35.6895, lng: 139.6917 },
  zoom: 13,
  disableDefaultUI: false,
  zoomControl: true,
  mapTypeControl: false,
  streetViewControl: false,
  fullscreenControl: true,
  zoomControlOptions: {
    position: google.maps.ControlPosition.RIGHT_CENTER
  }
});

Позиционирование контролов

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

  • TOP_LEFT
  • TOP_RIGHT
  • LEFT_TOP
  • RIGHT_BOTTOM
  • BOTTOM_CENTER

Перемещение контролов используется при интеграции карты в сложные интерфейсы, где важно избегать перекрытия с собственными UI-элементами приложения.

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

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

Однако важно учитывать, что:

  • отсутствие zoomControl не отключает масштабирование колесом мыши (если не изменён scrollwheel)
  • отключение mapTypeControl не блокирует программное переключение типов карты через API
  • скрытие Street View не запрещает доступ к панораме через прямые вызовы API

Управление полноэкранным режимом и кастомной логикой

Полноэкранный режим может быть отключён или заменён собственной логикой:

fullscreenControl: false

При этом переход в полноэкранный режим может быть реализован вручную через Fullscreen API браузера, что часто используется в интерфейсах с нестандартным дизайном.

Минимальная конфигурация без UI

Для создания «чистой» карты без интерфейсных элементов используется комбинация параметров:

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.7558, lng: 37.6173 },
  zoom: 10,
  disableDefaultUI: true,
  gestureHandling: "greedy"
});

Такая конфигурация характерна для:

  • визуализаций данных
  • heatmap-слоёв
  • кастомных навигационных систем
  • встроенных картографических виджетов

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

На мобильных платформах стандартный UI адаптируется автоматически, даже при частичном отключении контролов. Например:

  • увеличенные кнопки zoomControl при включении
  • автоматическое скрытие части элементов при нехватке места
  • приоритет жестового управления над кнопками интерфейса

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

Использование кастомных контролов вместо стандартных

После отключения стандартного UI часто внедряются собственные элементы управления через map.controls:

const controlDiv = document.createElement("div");
controlDiv.innerHTML = "<button>Zoom In</button>";

map.controls[google.maps.ControlPosition.TOP_LEFT].push(controlDiv);

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

Оглавление