Контрол типа карты

Контрол типа карты (Map Type Control) предназначен для переключения между различными представлениями карты. Пользователь может изменять способ отображения географических данных, выбирая стандартную дорожную карту, спутниковые снимки, гибридный режим или рельефную карту. Данный элемент интерфейса входит в число стандартных контролов Google Maps JavaScript API и может быть настроен как по внешнему виду, так и по доступным вариантам отображения.

Назначение контролов типа карты

Каждый тип карты решает собственные задачи визуализации:

Тип карты Описание
roadmap Стандартная дорожная карта с улицами, объектами инфраструктуры и подписями
satellite Спутниковые изображения местности
hybrid Спутниковые снимки с наложением дорожной сети и подписей
terrain Карта рельефа с отображением особенностей местности

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

Включение контрола типа карты

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

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

Свойство mapTypeControl принимает логическое значение:

mapTypeControl: true

или

mapTypeControl: false

При значении false элемент управления полностью скрывается.

Изменение типа карты программно

Тип карты может быть установлен без участия пользователя.

Использование свойства mapTypeId

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

Аналогичный вариант через константы API:

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

Доступные значения:

google.maps.MapTypeId.ROADMAP
google.maps.MapTypeId.SATELLITE
google.maps.MapTypeId.HYBRID
google.maps.MapTypeId.TERRAIN

Переключение типа карты после создания

После инициализации карты тип отображения можно изменить методом setMapTypeId().

map.setMapTypeId(
    google.maps.MapTypeId.HYBRID
);

Например, переключение по нажатию кнопки:

document
    .getElementById("switch")
    .addEventListener("click", () => {
        map.setMapTypeId(
            google.maps.MapTypeId.SATELLITE
        );
    });

HTML:

<button id="switch">
    Спутниковый режим
</button>

Настройка внешнего вида контрола

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

Настройка осуществляется через объект mapTypeControlOptions.

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

        mapTypeControl: true,

        mapTypeControlOptions: {
            style:
                google.maps.MapTypeControlStyle.DEFAULT
        }
    }
);

Стили контрола

DEFAULT

Стандартный внешний вид, который выбирается автоматически в зависимости от платформы и размера карты.

mapTypeControlOptions: {
    style:
        google.maps.MapTypeControlStyle.DEFAULT
}

Контрол отображается в виде выпадающего списка.

mapTypeControlOptions: {
    style:
        google.maps.MapTypeControlStyle.DROPDOWN_MENU
}

Такой вариант удобен при ограниченном пространстве интерфейса.

HORIZONTAL_BAR

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

mapTypeControlOptions: {
    style:
        google.maps.MapTypeControlStyle.HORIZONTAL_BAR
}

В результате пользователь видит все доступные режимы одновременно.

Ограничение доступных типов карт

Не всегда требуется предоставлять все варианты отображения. Можно оставить только необходимые режимы.

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

        mapTypeControlOptions: {
            mapTypeIds: [
                "roadmap",
                "satellite"
            ]
        }
    }
);

В контроле будут доступны только два режима:

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

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

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

mapTypeControlOptions: {
    mapTypeIds: [
        google.maps.MapTypeId.ROADMAP,
        google.maps.MapTypeId.HYBRID
    ]
}

Такой подход уменьшает вероятность ошибок в названиях типов карт.

Изменение расположения контрола

Как и большинство стандартных элементов интерфейса Google Maps, контрол типа карты может быть размещён в различных областях карты.

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

Полный пример:

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

        mapTypeControl: true,

        mapTypeControlOptions: {
            position:
                google.maps.ControlPosition.TOP_LEFT
        }
    }
);

Популярные позиции размещения

Верхний левый угол

google.maps.ControlPosition.TOP_LEFT

Верхний правый угол

google.maps.ControlPosition.TOP_RIGHT

Нижний левый угол

google.maps.ControlPosition.BOTTOM_LEFT

Нижний правый угол

google.maps.ControlPosition.BOTTOM_RIGHT

Верхняя центральная область

google.maps.ControlPosition.TOP_CENTER

Нижняя центральная область

google.maps.ControlPosition.BOTTOM_CENTER

Получение текущего типа карты

Текущий режим отображения можно определить методом getMapTypeId().

const currentType =
    map.getMapTypeId();

console.log(currentType);

Возможный результат:

roadmap

или

satellite

Это полезно при создании собственных элементов управления.

Отслеживание смены типа карты

Google Maps генерирует событие maptypeid_changed.

map.addListener(
    "maptypeid_changed",
    () => {
        console.log(
            map.getMapTypeId()
        );
    }
);

Каждое переключение будет вызывать обработчик события.

Пример вывода:

roadmap
satellite
hybrid
terrain

Создание собственного переключателя типов карты

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

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

HTML:

<button id="roadmap">
    Карта
</button>

<button id="satellite">
    Спутник
</button>

<button id="hybrid">
    Гибрид
</button>

Jav * aScript:

document
    .getElementById("roadmap")
    .addEventListener("click", () => {
        map.setMapTypeId(
            google.maps.MapTypeId.ROADMAP
        );
    });

document
    .getElementById("satellite")
    .addEventListener("click", () => {
        map.setMapTypeId(
            google.maps.MapTypeId.SATELLITE
        );
    });

document
    .getElementById("hybrid")
    .addEventListener("click", () => {
        map.setMapTypeId(
            google.maps.MapTypeId.HYBRID
        );
    });

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

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

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

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

        mapTypeControl: true,

        mapTypeControlOptions: {
            style:
                google.maps.MapTypeControlStyle.HORIZONTAL_BAR,

            position:
                google.maps.ControlPosition.TOP_LEFT,

            mapTypeIds: [
                google.maps.MapTypeId.ROADMAP,
                google.maps.MapTypeId.SATELLITE,
                google.maps.MapTypeId.HYBRID
            ]
        }
    }
);

В этом примере:

  • контрол включён;
  • используется горизонтальная панель;
  • элемент расположен в верхнем левом углу;
  • доступны только три режима отображения.

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

Туристические сервисы

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

google.maps.MapTypeId.HYBRID

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

Геоинформационные системы

Часто используются:

ROADMAP
TERRAIN

Рельеф помогает анализировать особенности местности.

Сервисы недвижимости

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

ROADMAP
SATELLITE

Спутниковые изображения позволяют оценивать окружающую застройку и инфраструктуру.

Логистические приложения

Преимущественно применяется:

ROADMAP

Поскольку основное внимание уделяется дорогам, адресам и маршрутам.

Основные свойства и методы

Элемент Назначение
mapTypeControl Включение или отключение контрола
mapTypeControlOptions Настройка внешнего вида и поведения
mapTypeId Установка начального типа карты
setMapTypeId() Изменение типа карты после создания
getMapTypeId() Получение текущего типа карты
maptypeid_changed Событие изменения типа карты
MapTypeControlStyle.DEFAULT Автоматический стиль
MapTypeControlStyle.DROPDOWN_MENU Выпадающее меню
MapTypeControlStyle.HORIZONTAL_BAR Горизонтальная панель
mapTypeIds Список доступных типов карт
position Позиция элемента управления на карте

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

Оглавление