Начать

Выберите платформу: Android iOS JavaScript

Ниже описывается, что нужно сделать, чтобы использовать на картах расширенные маркеры.

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

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

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

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

Инструкции по созданию идентификатора карты приводятся в статье об облачных стилях карт. В поле Map type (Тип карты) выберите значение JavaScript, а затем ниже укажите один из вариантов: Vector (Векторная) или Raster (Растровая).

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

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

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

  1. Загрузите Maps JavaScript API.

  2. Когда вам понадобится добавить расширенные маркеры, загрузите библиотеку для работы с ними. Для этого вызовите асинхронную (async) функцию:

    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;

  3. При создании экземпляра карты укажите ее идентификатор в свойстве 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.
  }
});

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

Как добавить маркер на карту