Начать

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

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

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

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

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

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

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

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

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

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

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

  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 , чтобы подписаться на изменения возможностей карты. Использование Map Capabilities не является обязательным и рекомендуется только в целях тестирования и устранения неполадок, а также в целях отката во время выполнения.

// 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.
  }
});

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

Создайте расширенный маркер по умолчанию