Все готово!

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

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

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

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

Стили карт

Настройте вид стандартных карт Google, применяя собственные стили при использовании Google Static Maps API. Вы можете изменить вид различных объектов, в том числе дорог, парков, областей застройки и других достопримечательностей. Изменяя цвет или стиль, вы можете выделить определенное содержимое, дополнить стиль окружающего контента или полностью скрыть какие-то объекты.

Примеры

В следующем примере показана карта Бруклина (США) со стилем, окрашивающим местные дороги ярко-зеленым цветом, а жилые зоны – черным. Также этот стиль инвертирует яркость меток, чтобы они лучше выделялись на темном фоне. Обратите внимание, что в этом рабочем примере используется кодировка URL-адресов:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

В следующем примере операции со стилями и упрощения используются для примерного представления атласа дорог США.

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

Синтаксис стиля

Чтобы создать карту с индивидуальным стилем, нужно включить один или несколько параметров style в URL-адрес запроса.

Каждая декларация параметра style может содержать следующие аргументы, разделенные символом вертикальной черты ("|"):

  • feature (дополнительный параметр) – указывает, какие объекты на карте должны быть выбраны для этого изменения стиля. В число объектов входят различные элементы на карте, например, дороги, парки или достопримечательности. Если аргумент feature отсутствует, заданный стиль применяется ко всем объектам.
  • element (дополнительный параметр) – указывает, какие элементы заданного объекта должны быть выбраны для этого изменения стиля. Элементы – это характеристики объекта, такие как геометрия или метки. Если аргумент element отсутствует, заданный стиль применяется ко всем элементам заданного объекта.
  • Набор правил стиля (обязательный параметр), которые должны быть применены к заданным объектам и элементам. API применяет правила в том порядке, в каком они указаны в декларации параметра style. Вы можете использовать любое количество правил с учетом обычных ограничений длины URL-адреса в Google Static Maps API.

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

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Объекты

Следующая декларация параметра style окрашивает все дороги на карте:

style=feature:road|color:0xffffff

Ниже приведены несколько распространенных вариантов выбора объектов:

  • feature:all (по умолчанию) – выбирает все объекты на карте.
  • feature:road – выбирает все дороги на карте.
  • feature:road.local – выбирает все местные дороги.

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

На основе объектов формируется дерево категорий, корневым элементом которого является элемент 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 – выбирает водоемы.

Элементы

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

style=feature:road.local|element:labels|color:0xffffff

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

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

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

Правила стилей

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

Следующая декларация параметра style применяет к дорогам на карте два правила стилей. Первое правило окрашивает дороги. Второе правило упрощает отображение дорог, показывая их более тонкими линиями без контура:

style=feature:road|color:0xffffff|visibility:simplified

Каждое объявление style должно содержать одну или несколько операций, разделяемых вертикальной чертой ("|"). Каждая операция указывает свое значение аргумента с помощью двоеточия (":"); при этом все операции применяются к выбору в том порядке, в котором они указаны.

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

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

    Примечание. Этот параметр устанавливает оттенок, сохраняя при этом насыщенность и яркость, указанные в стиле 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-значение формата 0xRRGGBB) – устанавливает цвет объекта.
  • weight – устанавливает вес объекта в пикселях (целое число, большее или равное нулю). Слишком высокое значение веса может привести к обрезке объекта возле границ листа.

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

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

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

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

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

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

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

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

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

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

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

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

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