Начать

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

Выполните следующие шаги, чтобы настроить расширенные маркеры.

Получите ключ API и активируйте JavaScript API для работы с картами.

Перед использованием расширенных маркеров вам потребуется проект в Google Cloud с платёжным аккаунтом и включённым API JavaScript для карт. Для получения дополнительной информации см. раздел «Настройка проекта Google Cloud» .

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

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

Чтобы создать новый идентификатор карты , выполните действия, описанные в разделе «Настройка облака» . Установите тип карты на JavaScript и выберите один из вариантов: векторный или растровый .

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

Обновите код инициализации карты.

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

  1. Загрузите 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.
  }
});

Следующие шаги

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