EvaMaps

Тема

Быстрый старт ​

Три способа получить карту EvaMaps на сайте — от «совсем без кода» до полного контроля через SDK.

1. Конструктор — без кода ​

Самый быстрый способ для тех, кто не пишет код: настройте центр, зум, тему и до 10 меток в браузере, получите готовый код <iframe> или <eva-map> для вставки в Tilda, WordPress, Битрикс или любой другой сайт. Конструктор ничего не хранит на сервере — все настройки лежат прямо в коде вставки.

Открыть конструктор → · подробнее о формате — «Встраивание без кода»

2. Web component <eva-map> ​

Для тех, кто пишет HTML руками. Один <script type="module"> и тег <eva-map> с атрибутами — не нужно ничего компилировать, метки читаются и правятся прямо в разметке.

html
<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>

Подробнее о <eva-map> →

3. SDK для разработчиков ​

Полный контроль: свои слои, GeoJSON, кластеры, события, программное управление картой.

Одним <script> (CDN) ​

html
<link rel="stylesheet" href="https://evamaps.ru/sdk/1/evamaps.css">
<script src="https://evamaps.ru/sdk/1/evamaps.js"></script>
<div id="map" style="height: 400px"></div>
<script>
  const map = EvaMaps.create('map', { center: [37.6173, 55.7558], zoom: 12, theme: 'light' });
  EvaMaps.marker([37.6173, 55.7558], { color: '#e53935' })
    .setPopup(EvaMaps.popup().setText('Наш офис'))
    .addTo(map);
</script>

Из npm (ESM) ​

ts
import { create, Marker, Popup } from '@evamaps/sdk';
import '@evamaps/sdk/style.css';

const map = create('map', { center: [37.6173, 55.7558], zoom: 12 });
new Marker([37.6173, 55.7558]).setPopup(new Popup().setText('Наш офис')).addTo(map);

Справочник SDK →

Что дальше ​

Нашли ошибку в документации? Напишите нам