Стандартные контролы карты

Стандартные контролы (Controls) — это встроенные элементы пользовательского интерфейса Google Maps JavaScript API, позволяющие управлять отображением карты без создания собственных кнопок и панелей. Они обеспечивают навигацию, изменение масштаба, переключение режимов отображения и другие действия.

Контролы автоматически размещаются поверх карты и адаптируются к различным размерам экрана. Большинство из них можно включать, отключать и перемещать в нужную область карты.

Все параметры контролов задаются через объект настроек карты при создании экземпляра google.maps.Map либо изменяются позднее через методы API.

Основные типы контролов

Google Maps JavaScript API предоставляет несколько встроенных контролов:

Контрол Назначение
Zoom Control Изменение масштаба
Map Type Control Переключение типа карты
Street View Control Переход в режим Street View
Fullscreen Control Полноэкранный режим
Rotate Control Вращение карты
Scale Control Отображение масштаба
Camera Control Управление камерой в векторных картах

Каждый контрол имеет собственный набор настроек и может быть независимо активирован или деактивирован.

Включение и отключение контролов

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

Пример:

const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 55.7558, lng: 37.6176 },
    zoom: 10,

    zoomControl: true,
    mapTypeControl: true,
    streetViewControl: true,
    fullscreenControl: true
});

Для отключения конкретного контрола используется значение false.

const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 55.7558, lng: 37.6176 },
    zoom: 10,

    zoomControl: false,
    streetViewControl: false
});

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

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

Для этого применяется параметр disableDefaultUI.

const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 55.7558, lng: 37.6176 },
    zoom: 10,

    disableDefaultUI: true
});

После этого ни один встроенный контрол отображаться не будет.

Частичное отключение контролов

Параметр disableDefaultUI можно комбинировать с отдельными контролами.

Например, отключить всё и оставить только масштабирование.

const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 55.7558, lng: 37.6176 },
    zoom: 10,

    disableDefaultUI: true,
    zoomControl: true
});

Подобный подход часто применяется в корпоративных интерфейсах и административных панелях.

Zoom Control

Назначение

Zoom Control отвечает за изменение масштаба карты.

Пользователь может:

  • увеличивать масштаб;
  • уменьшать масштаб;
  • быстро переходить между уровнями детализации.

Обычно контрол отображается в виде кнопок «+» и «−».

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControl: false
});

Map Type Control

Назначение

Map Type Control позволяет переключать режим отображения карты.

Доступны следующие типы:

  • дорожная карта (roadmap);
  • спутниковая карта (satellite);
  • гибридная карта (hybrid);
  • рельефная карта (terrain).

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeControl: true
});

Выбор типа по умолчанию

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: "satellite"
});

Настройка отображаемых типов

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeControlOptions: {
        mapTypeIds: [
            "roadmap",
            "satellite"
        ]
    }
});

В интерфейсе останутся только два варианта отображения.

Варианты оформления Map Type Control

Контрол поддерживает несколько визуальных представлений.

Горизонтальный стиль

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
    }
});

Отображается в виде горизонтального набора кнопок.

Выпадающий список

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
    }
});

Особенно полезен при ограниченном пространстве интерфейса.

Street View Control

Назначение

Street View Control обеспечивает быстрый переход в панорамный режим просмотра улиц.

Через него пользователь может:

  • активировать Street View;
  • перетаскивать человечка Pegman;
  • просматривать панорамы улиц.

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    streetViewControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    streetViewControl: false
});

Fullscreen Control

Назначение

Fullscreen Control переводит карту в полноэкранный режим браузера.

Это особенно полезно:

  • для картографических сервисов;
  • навигационных систем;
  • приложений мониторинга;
  • систем логистики.

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    fullscreenControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    fullscreenControl: false
});

Scale Control

Назначение

Scale Control отображает линейку масштаба, показывающую реальное расстояние на текущем уровне увеличения.

Пример отображения:

200 м
500 футов

Контрол автоматически пересчитывает значение при изменении масштаба.

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    scaleControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    scaleControl: false
});

Rotate Control

Назначение

Rotate Control используется для вращения карты в режимах, поддерживающих изменение ориентации.

Наиболее востребован при работе:

  • со спутниковыми снимками;
  • с 45-градусными изображениями;
  • с векторными картами.

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    rotateControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    rotateControl: false
});

Camera Control

Назначение

В современных векторных картах Google Maps появляется Camera Control, позволяющий управлять:

  • наклоном;
  • вращением;
  • перспективой;
  • положением камеры.

Контрол особенно актуален для трёхмерного представления карты.

Включение

const map = new google.maps.Map(document.getElementById("map"), {
    cameraControl: true
});

Отключение

const map = new google.maps.Map(document.getElementById("map"), {
    cameraControl: false
});

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

По умолчанию Google самостоятельно размещает контролы на карте. Однако практически любой контрол можно переместить.

Для этого используется перечисление google.maps.ControlPosition.

Пример:

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControl: true,

    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    }
});

Основные позиции контролов

Google Maps предоставляет большое количество вариантов расположения.

Наиболее используемые:

google.maps.ControlPosition.TOP_LEFT
google.maps.ControlPosition.TOP_CENTER
google.maps.ControlPosition.TOP_RIGHT

google.maps.ControlPosition.LEFT_TOP
google.maps.ControlPosition.LEFT_CENTER
google.maps.ControlPosition.LEFT_BOTTOM

google.maps.ControlPosition.RIGHT_TOP
google.maps.ControlPosition.RIGHT_CENTER
google.maps.ControlPosition.RIGHT_BOTTOM

google.maps.ControlPosition.BOTTOM_LEFT
google.maps.ControlPosition.BOTTOM_CENTER
google.maps.ControlPosition.BOTTOM_RIGHT

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

Перемещение Zoom Control

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControlOptions: {
        position: google.maps.ControlPosition.LEFT_CENTER
    }
});

После загрузки карты кнопки масштабирования будут расположены слева.

Перемещение Map Type Control

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_RIGHT
    }
});

Перемещение Street View Control

const map = new google.maps.Map(document.getElementById("map"), {
    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
});

Одновременная настройка нескольких контролов

Все контролы могут конфигурироваться в одном объекте.

const map = new google.maps.Map(document.getElementById("map"), {
    center: {
        lat: 55.7558,
        lng: 37.6176
    },
    zoom: 12,

    zoomControl: true,
    mapTypeControl: true,
    streetViewControl: true,
    fullscreenControl: true,
    scaleControl: true,

    zoomControlOptions: {
        position: google.maps.ControlPosition.RIGHT_CENTER
    },

    mapTypeControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    },

    streetViewControlOptions: {
        position: google.maps.ControlPosition.RIGHT_BOTTOM
    }
});

Динамическое изменение настроек контролов

После создания карты настройки можно изменять через метод setOptions().

Пример отключения Street View:

map.setOptions({
    streetViewControl: false
});

Включение масштаба:

map.setOptions({
    zoomControl: true
});

Изменение позиции:

map.setOptions({
    zoomControlOptions: {
        position: google.maps.ControlPosition.TOP_LEFT
    }
});

Практические схемы использования

Минималистичная карта

const map = new google.maps.Map(document.getElementById("map"), {
    disableDefaultUI: true,
    zoomControl: true
});

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

Карта для навигации

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControl: true,
    fullscreenControl: true,
    streetViewControl: true
});

Подходит для поиска маршрутов и геолокационных сервисов.

Аналитическая карта

const map = new google.maps.Map(document.getElementById("map"), {
    zoomControl: true,
    scaleControl: true,
    mapTypeControl: true
});

Часто применяется в GIS-системах и корпоративной аналитике.

Спутниковая карта

const map = new google.maps.Map(document.getElementById("map"), {
    mapTypeId: "satellite",

    mapTypeControl: true,
    zoomControl: true,
    rotateControl: true
});

Позволяет эффективно работать со спутниковыми изображениями и пространственными данными.

Особенности адаптивного поведения

Google Maps автоматически оптимизирует расположение контролов в зависимости от:

  • размеров окна браузера;
  • ориентации устройства;
  • типа устройства;
  • плотности пикселей экрана.

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

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

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

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

Например:

const customControl = document.createElement("button");
customControl.textContent = "Мой контрол";

map.controls[
    google.maps.ControlPosition.TOP_CENTER
].push(customControl);

В результате на карте будут отображаться как встроенные элементы Google Maps, так и собственные элементы приложения.

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

Оглавление