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

Нужно, если страница сама двигает карту или реагирует на клики по ней. Например, клик по филиалу в списке переносит карту к нему, а клик по метке подсвечивает строку в списке.

Какой способ выбрать

Способ	Когда	Как управлять
SDK	Своя страница или приложение, нужна полная свобода	Прямо через объект карты: map.flyTo(...), map.on('click', ...), слои, метки
<eva-map>	Карта из разметки, кода немного	Атрибуты элемента или сразу объект карты: el.map.flyTo(...) после события eva-ready
iframe из конструктора	Карта уже вставлена iframe'ом, переходить не хочется	Сообщения postMessage, удобнее через мост (ниже)

Если вы пишете код с нуля, берите SDK или <eva-map>: там не нужны ни сообщения, ни мост.

<script src="https://evamaps.ru/embed/1/embed.js"></script>
<eva-map id="m" center="37.6173,55.7558" zoom="11" style="display:block;height:400px"></eva-map>
<script>
  const el = document.getElementById('m');
  el.addEventListener('eva-ready', () => {
    el.map.on('click', (e) => console.log(e.lngLat));
    document.getElementById('spb').onclick = () => el.map.flyTo([30.3141, 59.9386], 12);
  });
</script>

iframe: команды и события

Карта в iframe изолирована от страницы (это и делает её безопасной). Страница может только отправлять ей сообщения и получать ответные. Чтобы не собирать сообщения вручную, подключите мост:

<iframe id="my-map" src="https://evamaps.ru/embed#v=1&c=37.6173,55.7558&z=12" …></iframe>

<script src="https://evamaps.ru/embed/1/embed.js"></script>
<script>
  const map = EvaEmbedBridge.connect(document.getElementById('my-map'));

  map.on('ready', () => console.log('карта загрузилась'));
  map.on('markerClick', (e) => console.log('клик по метке №', e.index));

  document.getElementById('spb').onclick = () =>
    map.send({ type: 'setCenter', lng: 30.3141, lat: 59.9386 });
</script>

Команды странице → карте	События карты → странице
setCenter { lng, lat }	ready
setZoom { zoom }	click { lng, lat }
fitBounds { west, south, east, north, padding? }	markerClick { index, lng, lat } — index в порядке меток в ссылке
openBalloon { index }	moveend { center, zoom }
openShapeBalloon { index }	shapeClick { index } — index в порядке фигур в ссылке

Мост EvaEmbedBridge входит в тот же embed.js, что и <eva-map>: один скрипт на всё встраивание из кода. Без него можно отправлять сообщения самому: iframe.contentWindow.postMessage({ source: 'eva-embed', payload: { type: 'setZoom', zoom: 14 } }, '*').