Начало работы

Ниже описывается, что нужно сделать, чтобы начать работу с предварительной версией функции "Расширенные маркеры".

Получите ключ API и включите Maps JavaScript API

Вам потребуется проект Google Cloud, в котором настроен платежный аккаунт и включен Maps JavaScript API. Узнайте, как настроить проект Google Cloud.

Получить ключ API

Создайте идентификатор карты

Следуйте инструкциям по созданию идентификатора карты, приведенным в статье Настройка облачных стилей. Укажите тип карты (JavaScript) и выберите вариант Vector (Векторная) или Raster (Растровая).

Создание идентификатора векторной карты

Измените код инициализации карты

Вам потребуется идентификатор карты. Его можно найти на странице Maps Management (Управление картами).

Добавьте v=beta и libraries=marker в тег script API. Пример:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&v=beta&libraries=marker&callback=initMap"></script>

При создании экземпляра карты укажите ее идентификатор в свойстве mapId. Вы можете использовать DEMO_MAP_ID или собственное значение.
```
const map = new
google.maps.Map(document.getElementById('map'), {
  center: {lat: -34.397, lng: 150.644},
  zoom: 8,
  mapId: 'YOUR_MAP_ID'
});
```

Проверьте функции карт (необязательно)

Для работы с расширенными маркерами требуется идентификатор карты. Если его значение недопустимо или отсутствует, то настройки расширенных маркеров не будут загружаться. В рамках решения проблемы можно добавить прослушиватель mapcapabilities_changed изменений функций карты, который будет срабатывать при выполнении следующих условий:

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

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

// Optional: subscribe to map capability changes.
map.addListener('mapcapabilities_changed', () => {
  const mapCapabilities = map.getMapCapabilities();

  if (!mapCapabilities.isAdvancedMarkersAvailable) {
    // Advanced markers are *not* available, add a fallback.
  }
});

Дальнейшие действия

Узнайте, как создать стандартный расширенный маркер.