Изменение цветов и видимости

В Google Maps JavaScript API визуальное оформление базовой карты управляется через механизм стилей, задаваемых в виде JSON-структуры. Основная точка конфигурации — свойство styles объекта карты.

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 55.751244, lng: 37.618423 },
  zoom: 10,
  styles: []
});

Массив styles состоит из правил, каждое из которых описывает изменение визуального представления определённых элементов карты.

Структура правила включает:

  • featureType — тип географического объекта (дороги, водоёмы, административные области)
  • elementType — часть объекта (геометрия, подписи)
  • stylers — набор изменений внешнего вида

Пример стилизации водоёмов и дорог:

const customStyles = [
  {
    featureType: "water",
    elementType: "geometry",
    stylers: [{ color: "#0e1626" }]
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#2b2b2b" }]
  },
  {
    featureType: "road",
    elementType: "labels.text.fill",
    stylers: [{ color: "#ffffff" }]
  }
];

map.setOptions({ styles: customStyles });

Изменение стилей применяется динамически через setOptions, без пересоздания экземпляра карты.

Управление видимостью элементов карты

Видимость объектов карты регулируется несколькими уровнями: через стили, через слои (layers), а также через отдельные оверлеи.

Скрытие элементов через стили

В стилях используется параметр visibility, принимающий значения:

  • on — отображение
  • off — скрытие
  • simplified — упрощённое отображение

Пример скрытия всех административных подписей:

const styles = [
  {
    featureType: "administrative",
    elementType: "labels",
    stylers: [{ visibility: "off" }]
  }
];

map.setOptions({ styles });

Скрытие всех объектов определённого типа позволяет создавать минималистичные карты без изменения логики данных.

Управление слоями карты

Некоторые элементы управляются не стилями, а отдельными слоями API.

Слой трафика

const trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);

Скрытие слоя:

trafficLayer.setMap(null);

Слой общественного транспорта

const transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

Слой велосипедных маршрутов

const bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map);

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

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

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

Светлая тема

const lightTheme = [
  {
    featureType: "all",
    elementType: "geometry",
    stylers: [{ color: "#f5f5f5" }]
  }
];

Тёмная тема

const darkTheme = [
  {
    featureType: "all",
    elementType: "geometry",
    stylers: [{ color: "#1e1e1e" }]
  },
  {
    featureType: "all",
    elementType: "labels.text.fill",
    stylers: [{ color: "#8a8a8a" }]
  }
];

Переключение осуществляется через обновление настроек карты:

map.setOptions({ styles: darkTheme });

Изменение применяется без перезагрузки компонента и без потери состояния центра и масштаба.

Управление видимостью маркеров

Маркер является отдельным оверлеем и не зависит от styles. Управление видимостью осуществляется через привязку к карте.

Создание маркера

const marker = new google.maps.Marker({
  position: { lat: 55.751244, lng: 37.618423 },
  map: map
});

Скрытие маркера

marker.setMap(null);

Повторное отображение

marker.setMap(map);

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

Видимость полилиний и полигонов

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

Полилиния

const polyline = new google.maps.Polyline({
  path: [
    { lat: 55.75, lng: 37.61 },
    { lat: 55.76, lng: 37.62 }
  ],
  strokeColor: "#FF0000",
  strokeOpacity: 1.0,
  strokeWeight: 2,
  map: map
});

Скрытие:

polyline.setMap(null);

Изменение видимости без удаления:

polyline.setOptions({ strokeOpacity: 0 });

Полигон

const polygon = new google.maps.Polygon({
  paths: [
    { lat: 55.75, lng: 37.61 },
    { lat: 55.76, lng: 37.62 },
    { lat: 55.74, lng: 37.63 }
  ],
  fillColor: "#00FF00",
  fillOpacity: 0.4,
  strokeColor: "#00AA00",
  map: map
});

Скрытие полигона:

polygon.setMap(null);

Управление подписями и интерфейсными элементами

Встроенные элементы интерфейса карты контролируются через параметры конфигурации.

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

Частичное управление:

const map = new google.maps.Map(document.getElementById("map"), {
  zoom: 10,
  center: { lat: 55.751244, lng: 37.618423 },
  mapTypeControl: true,
  zoomControl: true,
  streetViewControl: false
});

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

Изменение типов карты и их визуальной нагрузки

Google Maps поддерживает несколько базовых типов отображения:

  • roadmap
  • satellite
  • hybrid
  • terrain

Переключение типа карты:

map.setMapTypeId("satellite");

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

Управление прозрачностью и визуальной иерархией

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

  • opacity — прозрачность
  • lightness — изменение яркости
  • saturation — насыщенность

Пример подавления визуального шума:

const minimalStyle = [
  {
    featureType: "all",
    elementType: "labels",
    stylers: [{ visibility: "off" }]
  },
  {
    featureType: "all",
    elementType: "geometry",
    stylers: [{ lightness: 30 }, { saturation: -100 }]
  }
];

map.setOptions({ styles: minimalStyle });

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

Приоритеты отображения и наложения объектов

Объекты на карте имеют уровни приоритета:

  1. Базовый слой карты (tiles)
  2. Стилизация (styles)
  3. Слои (TrafficLayer, TransitLayer)
  4. Оверлеи (Marker, Polyline, Polygon)
  5. Пользовательские OverlayView

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

Динамическое обновление визуального состояния

Изменение состояния карты выполняется без перерисовки DOM-структуры, через внутренний механизм API.

function toggleDarkMode(enabled) {
  map.setOptions({
    styles: enabled ? darkTheme : lightTheme
  });
}

Изменение слоёв комбинируется с визуальными стилями:

trafficLayer.setMap(enabled ? map : null);

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

Оглавление