Стилизация дорог, ландшафта, зданий

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

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

Структура системы стилей

Стили задаются массивом объектов, каждый из которых описывает правило изменения отображения.

Основные поля

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

Типы featureType

Используются предопределённые категории:

  • road — дороги
  • landscape — ландшафт
  • building — здания
  • water — водоёмы
  • poi — точки интереса
  • administrative — административные границы

Типы elementType

  • geometry — основная геометрия объектов
  • labels.text.fill — заливка текста
  • labels.text.stroke — обводка текста
  • labels.icon — иконки
  • labels — все текстовые элементы

Stylers

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

  • color — цвет (#RRGGBB)
  • visibility — on, off, simplified
  • saturation — насыщенность (-100…100)
  • lightness — яркость (-100…100)
  • gamma — коррекция гаммы
  • weight — толщина линий

Стилизация дорог

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

Базовое скрытие второстепенных дорог

const styles = [
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { visibility: "simplified" },
      { saturation: -80 },
      { lightness: 20 }
    ]
  }
];

Акцент на магистралях

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

const styles = [
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { color: "#ffffff" },
      { weight: 1.2 }
    ]
  },
  {
    featureType: "road.highway",
    elementType: "labels",
    stylers: [
      { visibility: "on" }
    ]
  }
];

Минималистичная дорожная сеть

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

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

Стилизация ландшафта

Ландшафт определяет визуальное восприятие природных зон: парки, пустыни, горы, леса.

Приглушение природного фона

const styles = [
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 30 },
      { color: "#e5e5e5" }
    ]
  }
];

Полное отключение ландшафта

Используется в аналитических картах:

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

Разделение природных зон

Комбинация контраста и цветового кодирования:

const styles = [
  {
    featureType: "landscape.natural",
    elementType: "geometry",
    stylers: [
      { color: "#d0e8d0" }
    ]
  },
  {
    featureType: "landscape.man_made",
    elementType: "geometry",
    stylers: [
      { color: "#f0f0f0" }
    ]
  }
];

Стилизация зданий

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

Упрощение городской структуры

const styles = [
  {
    featureType: "building",
    elementType: "geometry",
    stylers: [
      { color: "#cccccc" },
      { lightness: 10 }
    ]
  }
];

Полное отключение зданий

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

Интеграция зданий в минималистичный дизайн

const styles = [
  {
    featureType: "building",
    elementType: "geometry",
    stylers: [
      { saturation: -100 },
      { lightness: 40 },
      { color: "#dcdcdc" }
    ]
  },
  {
    featureType: "building",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Использование StyledMapType

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

const styles = [
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#ffffff" }]
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [{ color: "#f2f2f2" }]
  },
  {
    featureType: "building",
    elementType: "geometry",
    stylers: [{ color: "#e0e0e0" }]
  }
];

const styledMap = new google.maps.StyledMapType(styles, {
  name: "Custom Style"
});

const map = new google.maps.Map(document.getElementById("map"), {
  center: { lat: 0, lng: 0 },
  zoom: 2,
  mapTypeControlOptions: {
    mapTypeIds: ["styled_map"]
  }
});

map.mapTypes.set("styled_map", styledMap);
map.setMapTypeId("styled_map");

Современный подход: Map ID и Cloud Styling

Современная архитектура Google Maps API смещается в сторону облачного управления стилями через Map ID, где стили задаются не в коде, а в консоли Google Cloud.

Пример инициализации карты с Map ID

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

Особенности Cloud Styling

  • централизованное управление стилями
  • версионирование дизайнов
  • применение без изменения клиентского кода
  • разделение окружений (dev / prod)

Комбинирование стилей дорог, ландшафта и зданий

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

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

Пример сбалансированного минималистичного стиля

const styles = [
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { color: "#ffffff" },
      { lightness: 10 }
    ]
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [
      { color: "#f5f5f5" }
    ]
  },
  {
    featureType: "building",
    elementType: "geometry",
    stylers: [
      { color: "#e6e6e6" }
    ]
  },
  {
    featureType: "poi",
    elementType: "all",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Управление визуальной иерархией

Стилизация карт строится на контроле визуального приоритета:

  • снижение насыщенности второстепенных слоёв
  • повышение контраста ключевых маршрутов
  • отключение нерелевантных объектов
  • унификация цветовой палитры

Часто используемые паттерны стилизации

Тёмная карта

const styles = [
  {
    elementType: "geometry",
    stylers: [{ color: "#1d2c4d" }]
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ color: "#2b3b57" }]
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [{ color: "#0f172a" }]
  }
];

«Чистая» аналитическая карта

const styles = [
  {
    featureType: "all",
    elementType: "labels",
    stylers: [{ visibility: "off" }]
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [{ visibility: "simplified" }]
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [{ color: "#eeeeee" }]
  }
];

Карта с акцентом на дороги

const styles = [
  {
    featureType: "road.highway",
    elementType: "geometry",
    stylers: [
      { color: "#ffcc00" },
      { weight: 1.5 }
    ]
  },
  {
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { saturation: -50 }
    ]
  },
  {
    featureType: "landscape",
    elementType: "geometry",
    stylers: [
      { lightness: 40 }
    ]
  }
];
Оглавление