Платформа Google Maps предлагает функции стилизации карт на основе облака, которые упрощают стилизацию, настройку и управление вашими картами с помощью Google Cloud Console, позволяя создавать индивидуальные карты для ваших пользователей без необходимости обновлять код приложений каждый раз, когда вы изменить стиль.
В стилях, созданных до 15 сентября 2020 г., не будут отображаться расширенные естественные функции Google Maps. Чтобы использовать поддержку расширенных естественных функций Google Maps для стиля вашей карты, необходимо создать стиль карты .
Стилизация карт на основе облака позволяет создавать и редактировать стили карт для любых ваших приложений, использующих Карты Google, без внесения каких-либо изменений в код после того, как идентификатор карты будет установлен. Все изменения стиля можно внести в Cloud Console, не требуя навыков программирования. Измените внешний вид и цвет многих элементов карты, таких как дороги, здания, водоемы, достопримечательности и транзитные маршруты.
Эти функции включают в себя:
- Стилизация карт на основе облака . Вместо того чтобы стилизовать карту в коде с использованием JSON, управляйте динамическими или статическими картами и стилизируйте их в Cloud Console, используя идентификаторы карт и стили карт.
- Векторная карта . Разработчики JavaScript могут использовать ту же векторную карту с ускорением WebGL, которая доступна на сайте maps.google.com, непосредственно в своих веб-приложениях.
- Фильтрация бизнес-объектов : пять категорий бизнес-достопримечательностей можно при желании удалить с карты.
- Управление плотностью POI : плотность точек интереса, показанных на базовой карте, можно настроить, чтобы по умолчанию отображалось больше или меньше точек интереса.
Хотя облачное оформление карт доступно в Maps SDK для Android 1 , Maps SDK для iOS , JavaScript и Maps Static API , не все функции будут видны на всех платформах.
Прежде чем вы начнете
- Создать идентификатор карты
Чтобы использовать стиль облачных карт, ваша карта должна быть загружена с использованием идентификатора карты . - Переход от жестко запрограммированного стиля
Прежде чем добавлять идентификатор карты для использования стилей облачных карт на существующей карте, настроенной с помощью жестко запрограммированных стилей, таких как параметры запроса JSON или URL-адреса, мы рекомендуем удалить жестко запрограммированные стили, чтобы избежать потенциального конфликта с будущими функциями. Вы можете импортировать стиль JSON в новый стиль карты .- На Android обновите
MapStyleOptions
. - В iOS обновите класс
GMSMapStyle
- В JavaScript удалите стиль
MapTypeStyle
. - В Maps Static удалите параметр
style
.
- На Android обновите
Чтобы использовать стиль облачных карт, необходимо использовать Maps SDK для Android версии 18.0.0 или новее, а также последнюю версию Maps SDK для Android-рендерера .
Биллинг
Для использования стиля облачных карт требуется идентификатор карты . В Maps SDK для Android, Maps SDK для iOS и JavaScript за использование идентификатора карты взимается плата за номер SKU динамических карт . В Maps Static API за использование идентификатора карты взимается плата за номер SKU Static Maps .
Примеры
Андроид
Запустите пример приложения ApiDemos.
Чтобы запустить пример приложения ApiDemos, ознакомьтесь с примером GitHub ( Java | Kotlin ) и просмотрите демонстрацию CloudBasedMapStylingDemoActivity
( Java | Kotlin ).
Вы можете найти пример приложения на Java и Kotlin , который демонстрирует, как стилизовать карту Android из облака.
Известные вопросы
Как только ваше приложение будет доставлено клиентам, пользовательские стили для карт с идентификаторами карт можно будет обновить из Google Cloud Console. Новые стили будут отражены в вашем приложении через несколько часов.
Чтобы новые пользовательские стили сразу же отображались для целей тестирования, удалите данные приложения со своего тестового устройства. Дополнительную информацию об удалении данных с вашего устройства см. в Справке Android — Освобождение места .
Обратите внимание, что настройки могут различаться в зависимости от телефона. Для получения дополнительной информации обратитесь к производителю вашего устройства .
iOS
Запустите пример приложения ApiDemos.
Чтобы запустить пример приложения ApiDemos, см. пример приложения GoogleMap на GitHub и просмотрите проект CloudBasedMapStylingViewController
(пример GitHub для Swift | Objective-C ).
Дополнительная демо-версия Cloud Styling CocoaPod или GitHub
Вместо того, чтобы начинать с нуля, вы можете опробовать наш пример приложения Objective-C, который демонстрирует, как стилизовать вашу карту iOS из облака здесь .
Создание бета-демонстрационного приложения
В Xcode нажмите кнопку компиляции, чтобы построить, а затем запустить текущую схему. При сборке возникает ошибка, предлагающая ввести ключ API в файл SDKDemoAPIKey.h
.
Если у вас еще нет ключа API, следуйте этим инструкциям , чтобы настроить проект в Cloud Console и получить ключ API. При настройке ключа в Cloud Console вы можете указать идентификатор пакета вашего приложения, чтобы гарантировать, что только ваше приложение может использовать ключ. Идентификатор пакета по умолчанию для примера приложения SDK — com.example.GoogleMapsDemos
.
Отредактируйте файл SDKDemoAPIKey.h
и вставьте свой ключ API в определение константы kAPIKey:
```
static NSString *const kAPIKey = @"YOUR_API_KEY";
```
Если Xcode предложит вам разблокировать файл SDKDemoAPIKey.h
для редактирования, выберите Unlock .
Удалите следующую строку:
```
#error Register for API Key and insert here.
```
Создайте и запустите проект.
Демонстрация стиля облачных карт
Демонстрация CloudStyling
показывает, как стилизовать карту с помощью стиля, установленного в Google Cloud Console.
Когда запустится демонстрационное приложение, щелкните демо-версию настройки карты в разделе «Бета-образцы» вверху списка.
Нажмите «Карта стилей» , чтобы увидеть эффект от загрузки различных идентификаторов карт.
Вы также можете попробовать добавить свой собственный стиль («Карта стилей» > «Добавить новый идентификатор карты») и просмотреть обновление карты с вашим собственным стилем.
JavaScript
Это базовый пример загрузки карты с пользовательским стилем с использованием идентификатора карты. В этом случае JavaScript Карт ссылается на идентификатор карты 8e0a97af9386fef
при загрузке карты и автоматически применяет стиль карты, связанный в данный момент с этим идентификатором карты.
Машинопись
function initMap(): void { new google.maps.Map( document.getElementById("map") as HTMLElement, { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, } as google.maps.MapOptions ); } declare global { interface Window { initMap: () => void; } } window.initMap = initMap;
JavaScript
function initMap() { new google.maps.Map(document.getElementById("map"), { mapId: "8e0a97af9386fef", center: { lat: 48.85, lng: 2.35 }, zoom: 12, }); } window.initMap = initMap;
Попробуйте образец
Статический API карт
Идентификатор карты – это идентификатор, связанный с определенным стилем карты или объектом. Настройте стиль карты и свяжите его с идентификатором карты в Google Cloud Console. Затем, когда вы ссылаетесь на идентификатор карты в своем коде, соответствующий стиль карты отображается в вашем приложении. Любые последующие обновления стиля, которые вы делаете, автоматически появляются в вашем приложении, без необходимости каких-либо обновлений со стороны ваших клиентов.
Если вы используете стиль облачных карт с существующей картой, настроенной с помощью параметра
style
, обязательно удалите их, чтобы избежать потенциального конфликта с будущими функциями.Чтобы добавить идентификатор карты к новой или существующей карте, которая использует один из наших веб-API, добавьте параметр URL-адреса
map_id
и установите для него идентификатор вашей карты. В этом примере показано добавление идентификатора карты на карту с помощью Maps Static API.<img src="https://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap&markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318&markers=color:red%7Clabel:C%7C40.718217,-73.998284&key=YOUR_API_KEY&map_id=YOUR_MAP_ID&signature=YOUR_SIGNATURE" />
Стилизация облачных карт недоступна в облегченном режиме Android . ↩