Web component <eva-map>

Тег <eva-map>, который сам создаёт карту, когда попадает во вьюпорт, и сам убирает за собой при удалении из DOM. Внутри — Shadow DOM: стили движка не конфликтуют со стилями сайта-хозяина (и наоборот).

<script src="https://evamaps.ru/embed/1/embed.js"></script>
<eva-map center="37.6173,55.7558" zoom="12" theme="light" style="display:block;height:400px">
  <eva-marker lnglat="37.6173,55.7558" color="#e53935" label="Офис">Москва, Тверская, 1</eva-marker>
</eva-map>

Обязательно задайте карте размер через CSS (style="display:block;height:400px" или класс) — сам компонент высоту не навязывает.

Атрибуты <eva-map>

Атрибут	По умолчанию
center	37.6173,55.7558	lng,lat
zoom	11
theme	light	light, dark, gray
cooperative	true	false — колесо мыши зумит карту без Ctrl/⌘
zoom-control	true	Кнопки +/−
scale-control	false	Линейка масштаба. У двух форм встраивания (<eva-map> и iframe-фрагмент) один и тот же дефолт: выключена
map-id	—	Сохранённая карта (8 символов), тот же короткий код, что embed#id=…. Остальные атрибуты, если их указать, перекрывают сохранённые. Как получить код и ссылку для правки — в разделе «Встраивание без кода»

center и theme можно менять на лету — компонент следит за изменением атрибутов и перерисовывает карту.

Сохранённая карта:

<script src="https://evamaps.ru/embed/1/embed.js"></script>
<eva-map map-id="Ab3dE7xK" style="display:block;height:400px"></eva-map>

Если карта не найдена или её отключили, на месте карты будет надпись «Карта недоступна».

<eva-marker>

<eva-marker lnglat="37.6173,55.7558" color="#e53935" label="Офис">
  Текст балуна — только текст, HTML внутри тега не интерпретируется
</eva-marker>

Атрибут	Обязателен
lnglat	да	lng,lat
color	нет	hex-цвет метки
label	нет	короткая постоянная подпись рядом с меткой, ≤ 24 символа

Текст внутри тега <eva-marker> идёт в балун только как textContent — вложенная разметка не разбирается, это защита от XSS через данные метки (см. принципы в справочнике SDK). Можно добавлять, менять и удалять <eva-marker> в рантайме обычными методами DOM (appendChild, removeChild, смена атрибутов) — компонент следит за детьми через MutationObserver и пересобирает метки.

Фигуры: <eva-line>, <eva-polygon>, <eva-circle>

Линии, многоугольники и круги — такие же дочерние элементы <eva-map>, как <eva-marker>:

<eva-map center="37.6173,55.7558" zoom="11" style="display:block;height:400px">
  <eva-line points="37.60,55.70;37.65,55.75;37.70,55.80" color="#1a73e8" width="4"></eva-line>
  <eva-polygon points="37.50,55.60;37.60,55.60;37.60,55.70" color="#1a73e8" fill="#43a047" fill-opacity="0.3"
    label="Зона доставки" description="Бесплатно от 2000 ₽"></eva-polygon>
  <eva-circle center="37.62,55.76" radius="1500" color="#5e35b1"></eva-circle>
</eva-map>

Элемент	Обязательные атрибуты
<eva-line>	points="lng,lat;lng,lat;…" (минимум 2 точки)
<eva-polygon>	points="…" (минимум 3 точки)
<eva-circle>	center="lng,lat", radius	Радиус в метрах, 1–500000

Общие необязательные атрибуты: color (цвет линии/контура), width (толщина, 1–10), fill и fill-opacity (заливка — только у многоугольника и круга), label (короткая подпись, ≤ 24 символа), description (текст балуна, ≤ 1000 символов, только как текст), link (только http(s)). Балун открывается по клику на фигуру, так же как у метки. До 20 фигур на карту, до 500 точек на фигуру.

Ленивая загрузка

Карта не создаётся, пока элемент не попал во вьюпорт (IntersectionObserver). Это значит, что <eva-map> в конце длинной страницы не тратит ресурсы и не увеличивает число загрузок, пока пользователь до него не долистал — полезно иметь в виду при расчёте статистики использования.

Управление из кода

Атрибуты можно менять на лету, например el.setAttribute('zoom', '14'), карта подстроится. После события eva-ready доступен сам объект карты el.map, тот же, что в SDK. Подробнее — «Управление картой из кода».

Чем отличается от SDK

<eva-map> — это готовая карта с разумными настройками по умолчанию и минимумом разметки: не нужно писать JavaScript, чтобы поставить карту с несколькими метками. Если нужны свои слои, GeoJSON, кластеры или программная логика поверх событий карты — используйте SDK, он даёт полный доступ к объекту Map и всем слоям.