Все готово!

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

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Работа со стилем

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

Примеры

Следующее определение стиля JSON делает все объекты на карте серыми, а затем окрашивает основные дороги в синий цвет и полностью скрывает метки ландшафта:

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Объект JSON

Определение стиля JSON состоит из следующих элементов:

  • featureType (дополнительный параметр) – указывает, какие объекты на карте должны быть выбраны для этого изменения стиля. Объекты – это географические данные, представленные на карте, включая дороги, парки, водоемы и многое другое. Если не указан ни один из объектов, будут выбраны все объекты.
  • elementType (дополнительный параметр) – свойство указанного объекта, который должен быть выбран. Элементами являются дополнительные части объекта, включая метки и геометрические формы. Если ни один из элементов не указан, будут выбраны все элементы объекта.
  • stylers (параметры стилей) – правила применения к выбранным объектам и элементам. Параметры стилей указывают цвет, видимость и вес объекта. К одному объекту можно применять один или несколько параметров стилей.

Чтобы указать стиль, необходимо объединить селекторы featureType и elementType, а также ваши параметры стилей stylers в массив стилей. В одном массиве может быть представлена любая комбинация объектов. Тем не менее, количество стилей, доступных для применения за один раз, ограничено. Если длина массива стилей превышает максимально допустимое число символов, никакие стили не применяются.

В оставшейся части страницы содержится дополнительная информация об объектах, элементах и параметрах стилей.

featureType

Следующий фрагмент JSON позволяет выбирать все дороги на карте:

{
  "featureType": "road"
}

Объекты (или типы объектов) – это географические данные, представленные на карте, включая дороги, парки, водоемы, организации и многое другое.

На основе объектов формируется дерево категорий, корневым элементом которого является элемент all (все объекты). Если не указан ни один из объектов, будут выбраны все объекты. Такой же эффект будет иметь выбор элемента all.

Некоторые объекты содержат дочерние объекты, названия которых отделяются точками. Например, landscape.natural или road.local. Если вы укажете только родительский объект, например, road, стили, выбранные для него, также будут применены ко всем его дочерним объектам, таким как road.local и road.highway.

Обратите внимание, что в родительских объектах могут содержаться некоторые элементы, которые не включены во все принадлежащие им дочерние элементы.

Доступны следующие варианты.

  • all (по умолчанию) – выбирает все объекты.
  • administrative – выбирает все административные регионы. Применение стилей затрагивает только метки административных регионов, а не географические границы или заливку.
    • administrative.country – выбирает страны.
    • administrative.land_parcel – выбирает участки земли.
    • administrative.locality – выбирает местоположения.
    • administrative.neighborhood – выбирает районы.
    • administrative.province – выбирает области.
  • landscape – выбирает все ландшафты.
    • landscape.man_made – выбирает все конструкции, построенные человеком.
    • landscape.natural – выбирает естественные объекты.
    • landscape.natural.landcover – выбирает объекты покрытия земли.
    • landscape.natural.terrain – выбирает объекты местности.
  • poi – выбирает все достопримечательности.
    • poi.attraction – выбирает туристические объекты.
    • poi.business – выбирает организации.
    • poi.government – выбирает правительственные здания.
    • poi.medical – выбирает службы экстренной помощи, включая больницы, аптеки, полицейские участки, медицинские кабинеты и другие.
    • poi.park – выбирает парки.
    • poi.place_of_worship – выбирает объекты религиозного характера, включая церкви, храмы, мечети и другие.
    • poi.school – выбирает школы.
    • poi.sports_complex – выбирает спортивные комплексы.
  • road – выбирает все дороги.
    • road.arterial – выбирает основные дороги.
    • road.highway – выбирает крупные магистрали.
    • road.highway.controlled_access – выбирает крупные магистрали с контролируемым доступом.
    • road.local – выбирает местные дороги.
  • transit – выбирает все промежуточные остановки и маршруты общественного транспорта.
    • transit.line – выбирает маршруты общественного транспорта.
    • transit.station – выбирает все промежуточные остановки.
    • transit.station.airport – выбирает аэропорты.
    • transit.station.bus – выбирает автобусные остановки.
    • transit.station.rail – выбирает железнодорожные станции.
  • water – выбирает водоемы.

elementType

Следующий фрагмент JSON позволяет выбирать метки всех местных дорог:

{
  "featureType": "road.local",
  "elementType": "labels"
}

Элементы – это составные части того или иного объекта. Например, дорога состоит из графической линии (геометрического элемента) на карте и текста, который обозначает ее имя (метки).

Ниже приведены доступные элементы, однако обратите внимание, что определенный объект может не поддерживать никакие из этих элементов или поддерживать только некоторые из них, или все указанные элементы:

  • all (по умолчанию) – выбирает все элементы определенного объекта.
  • geometry – выбирает все геометрические элементы определенного объекта.
    • geometry.fill – выбирает только заливку геометрических элементов объекта.
    • geometry.stroke – выбирает только линии геометрических элементов объекта.
  • labels – выбирает текстовые метки, связанные с определенным объектом.
    • labels.icon – выбирает только значок, отображаемый в метке объекта.
    • labels.text – выбирает только текст метки.
    • labels.text.fill – выбирает только заливку метки. Заливка метки обычно выглядит как цветной контур вокруг его текста.
    • labels.text.stroke – выбирает только линии текста метки.

stylers

Параметры стилей – это варианты форматирования, которые вы можете применить к объектам и элементам карты.

Следующий фрагмент JSON позволяет отображать объект в ярко-зеленом цвете с использованием значения RGB:

"stylers": [
  { "color": "#99FF33" }
]

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

"stylers": [
  { "saturation": -100 }
]

Этот фрагмент позволяет полностью скрыть объект:

    "stylers": [
      { "visibility": "off" }
    ]

Поддерживаются следующие параметры стилей:

  • hue (шестнадцатеричное значение цвета RGB #RRGGBB) – указывает базовый цвет.

    Примечание. Этот параметр устанавливает оттенок, сохраняя при этом насыщенность и яркость, указанные в стиле Google по умолчанию (или в параметрах другого стиля, который вы определите на карте). Итоговый цвет определяется относительно стиля базовой карты. Если Google каким-либо образом изменяет стиль базовой карты, эти изменения повлияют на объекты карты, для которых используется стиль с параметром hue. По возможности всегда лучше использовать абсолютный параметр стиля color.

  • lightness – указывает процентное изменение яркости элемента (значение с плавающей запятой от -100 до 100). Отрицательные значения означают уменьшение яркости (-100 соответствует черному цвету), а положительные – увеличение яркости (+100 соответствует белому цвету).

    Примечание. Этот параметр устанавливает яркость, сохраняя при этом насыщенность и оттенок, указанные в стиле Google по умолчанию (или в параметрах другого стиля, который вы определите на карте). Итоговый цвет определяется относительно стиля базовой карты. Если Google каким-либо образом изменяет стиль базовой карты, эти изменения повлияют на объекты карты, для которых используется стиль с параметром lightness. По возможности всегда лучше использовать абсолютный параметр стиля color.

  • saturation – изменение интенсивности базового цвета элемента в процентах (значение с плавающей запятой от -100 до 100).

    Примечание. Этот параметр устанавливает насыщенность, сохраняя при этом оттенок и яркость, указанные в стиле Google по умолчанию (или в параметрах другого стиля, который вы определите на карте). Итоговый цвет определяется относительно стиля базовой карты. Если Google каким-либо образом изменяет стиль базовой карты, эти изменения повлияют на объекты карты, для которых используется стиль с параметром saturation. По возможности всегда лучше использовать абсолютный параметр стиля color.

  • gamma – применяемая к элементу гамма-коррекция (значение с плавающей запятой от 0,01 до 10,0, значение 1,0 означает отсутствие коррекции). Гамма-коррекция служит для нелинейного изменения яркости оттенков без влияния на значения для белого или черного цветов. Обычно гамма-коррекция используется для изменения контрастности нескольких элементов. Например, гамма-коррекцию можно применить для увеличения или уменьшения контраста между краями и внутренними частями элементов.

    Примечание. Этот параметр настраивает яркость относительно стиля Google по умолчанию с использованием кривой гамма-распределения. Если Google каким-либо образом изменяет стиль базовой карты, эти изменения повлияют на объекты карты, для которых используется стиль с параметром gamma. По возможности всегда лучше использовать абсолютный параметр стиля color.

  • invert_lightness (если имеет значение true) – инвертирует яркость. Это может применяться, например, для переключения на темную карту с белым цветом текста.

    Примечание. Этот параметр просто инвертирует стиль Google по умолчанию. Если Google каким-либо образом изменяет стиль базовой карты, эти изменения повлияют на объекты карты, для которых используется стиль с параметром invert_lightness. По возможности всегда лучше использовать абсолютный параметр стиля color.

  • visibility (on, off или simplified) – указывает, отображается ли элемент на карте, и в каком виде. Если этот параметр имеет значение simplified, некоторые параметры стиля не применяются к указанным объектам. Например, дороги упрощенно отображаются как тонкие линии без контуров, для парков не отображается текст меток, а только значки и т. д.
  • color (шестнадцатеричное RGB-значение формата #RRGGBB) – устанавливает цвет объекта.
  • weight – устанавливает вес объекта в пикселях (целое число, большее или равное нулю). Слишком высокое значение веса может привести к обрезке объекта возле границ листа.

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

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

Модель оттенков, насыщенности и яркости цвета

В стилизованных картах для обозначения цветов в операциях применения параметров стилей используется модель оттенков, насыщенности и яркости цвета (HSL). Оттенок определяет базовый цвет, насыщенность определяет его интенсивность, а яркость определяет относительное количество черного или белого в составе цвета.

Гамма-коррекция изменяет яркость в цветовом пространстве, как правило, для увеличения или уменьшения контрастности. Кроме того, модель HSL определяет цвет в пространстве координат, где hue (оттенок) означает ориентацию внутри цветового круга, тогда как насыщенность и яркость указывают амплитуды среди разных осей. Оттенки измеряются в цветовом пространстве RGB, которое подобно большинству других аналогичных пространств RGB, за исключением того, что в нем отсутствуют оттенки белого и черного.

Модель оттенков, насыщенности и яркости цвета

Хотя в параметре hue (оттенок) для обозначения цвета используется шестнадцатеричный код HTML, это значение используется только для определения базового цвета из цветовой палитры, но не задает его насыщенность или яркость, которые указываются отдельно при изменении процентного значения.

Например, оттенок для чистого зеленого цвета может быть определен как hue:0x00ff00 или hue:0x000100. Оба оттенка будут идентичны. Оба значения указывают на чистый зеленый в цветовой модели HSL.

Цветовой круг RGB

Значения hue в формате RGB, состоящие в равных частях из красного, зеленого и синего цвета, не указывают оттенок, поскольку ни одно из этих значений не указывает ориентацию в пространстве координат HSL. Примерами могут служить "#000000" (черный), "#FFFFFF" (белый) и все оттенки серого. Чтобы задать черный, белый или серый цвет, необходимо полностью убрать насыщенность (установить значение -100) и изменить яркость.

При изменении существующих объектов, уже имеющих цветовую схему, изменение значения hue не меняет текущие значения saturation или lightness.

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.