Начать

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

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

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

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

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

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

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

Важно: для тестирования вы можете пропустить шаг создания и настройки идентификатора карты, используя mapId: 'DEMO_MAP_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'
   });

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

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

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