Начать

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

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

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

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

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

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

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

Важно: для тестирования вы можете пропустить этап создания и настройки идентификатора карты, используя mapId: 'DEMO_MAP_ID' в коде вашего приложения.

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

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

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'
   });

Внимание: в примерах карт для расширенных маркеров используются идентификаторы карт, связанные со стилем карты с уменьшенным количеством точек интереса. Если вы повторно используете пример кода, мы рекомендуем заменить эти идентификаторы карт на DEMO_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.
  }
});

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

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