Игорь собрал лендинг услуг в Cursor и попросил Agent «добавь Яндекс.Карту». В ответ прилетели JS API v3, apikey=YOUR_API_KEY и пустой div – карта не грузится, а в голове страх: без кабинета разработчика нельзя. На деле для страницы контактов хватит Конструктора и iframe: метка, балун с телефоном, width 100% и loading=lazy – за один вечер без npm и React.
Яндекс.Карта на сайт для новичка – это не API и не React, а Конструктор → код iframe → вставка через Cursor Agent. Базовый виджет с меткой работает без API-ключа; ключ нужен только для поиска, маршрутов и панорам на самой карте. Включите «Растянуть по ширине», поставьте loading=lazy и проверьте с телефона, что метка не обрезается.
В Яндекс Вордстат на 2026-07-10 кластер «яндекс карта на сайт» – 3220 показов в месяц, «как добавить яндекс карту на сайт» – 219, «яндекс конструктор карт на сайт» – 137. Люди ищут рабочий виджет, а не кабинет разработчика. Клуб API Карт прямо пишет: работа без ключа сохранена.
Если лендинга ещё нет, сначала соберите простой лендинг в Cursor AI без кода. Карту логично ставить на страницу контактов или рядом с адресом на странице услуг. Ниже – конструктор, iframe и правило для Cursor.
Поймите задачу: кликабельная метка без кабинета API
Боль звучит так: кажется, что «Яндекс.Карта на сайт» = ключ, npm и страх сломать вёрстку. На практике для контактов нужна кликабельная метка с телефоном в балуне, а не JS API v3. Балун – это всплывающая карточка по клику на метку: название, адрес, телефон.
Сюрприз для многих: справка Конструктора и клуб API Карт подтверждают – базовый виджет работает без ключа. Ключ нужен, только если на карте нужны поиск, маршруты или панорамы. Cursor часто путает это с quickstart JS API v3, где apikey обязателен – отсюда ложный страх «без кабинета нельзя».
| Вариант | Что получите | Нужен ли ключ | Кому подходит |
|---|---|---|---|
| Картинка (img) | Статичный снимок, без клика | Нет | Черновик |
| iframe / script Конструктора | Интерактивная карта с меткой | Нет для базовой метки | Новичок, контакты |
| JS API v3 | Полный контроль кодом | Да, в quickstart | Разработчик |
Итоговый вердикт: для контактов берите Конструктор и iframe. Картинку не ставьте вместо виджета – клиент не откроет балун. JS API v3 и React-обёртки оставьте разработчикам.
Сделайте так: Конструктор → iframe. Не делайте: «добавь карту через npm» и пустой YOUR_API_KEY. Избегайте React-обёрток «на всякий случай».
Соберите виджет в Конструкторе: метка и балун с телефоном
Откройте yandex.ru/map-constructor, войдите в Яндекс и создайте карту. Найдите адрес, поставьте метку. В балуне напишите название и телефон – так клиент сразу видит, куда звонить.
- Шаг 1: создайте карту и найдите нужный адрес на схеме.
- Поставьте одну метку на точку, куда реально приезжают клиенты.
- Заполните балун: название, короткий адрес, телефон.
- Нажмите «Получить код карты», включите «Растянуть по ширине» (это width 100%).
- Задайте высоту около 400 px и скопируйте код вкладки iframe.
- Проверьте превью в Конструкторе: метка на месте, балун открывается.
Типичная ошибка – оставить фиксированные 600×400 и не включить растягивание: на телефоне карта обрезается. Если iframe ругается на масштаб, приблизьте карту или возьмите script без apikey – для базовой метки этого достаточно. По справке iframe только слой «Схема» и крупные масштабы; правки делайте в Конструкторе и копируйте код заново.
Зафиксируйте правило map-embed.mdc, чтобы Cursor не тянул React
Страх сломать сайт появляется, когда Agent на «добавь карту» тащит JS API v3, React или npm-пакет вроде react-yandex-maps-constructor. Например, Cursor Rules работают только как .mdc в .cursor/rules/; обычный .md агент может игнорировать. Для project rules нужен alwaysApply: true.
Откройте папку сайта рядом с index.html и создайте .cursor/rules/map-embed.mdc:
alwaysApply: true
description: Yandex map embed static HTML onlyКарта только готовым iframe или script из Конструктора. Один static HTML, Tailwind CDN. Запрещены npm, React, package.json, JS API v3 и обязательный apikey. width=»100%», высота ~400 px, loading=»lazy». Вставлять под адресом на contacts/services. Не трогать head, меню и формы.
Рекомендация: держите правило жёстким. Используйте alwaysApply: true. Не просите «как в React-примере с GitHub» – иначе вместо одного блока получите стек, который новичок не починит. Уберите из промпта любые намёки на npm и apikey.
Вставьте карту через Agent: width 100% и loading=lazy
iframe – это «окошко» на странице с картой Яндекса. Код карты руками писать не нужно: вставляете готовый фрагмент. Откройте Agent (Ctrl+I / Cmd+I) и дайте промпт:
Вставь этот iframe Яндекс.Карты под блоком адреса на странице контактов (или услуг). width 100%, height около 400, добавь loading=»lazy». Не трогай head, меню и формы. Без API-ключа, npm и React.
Вставьте скопированный код в чат Agent и дождитесь правки HTML. На практике часто ломается высота в процентах: если height=»100%», а у родителя высота не задана, карта не отобразится – так в docs Конструктора. Берите ~350–400 px по высоте и 100% по ширине.
loading=»lazy» откладывает загрузку виджета, пока человек не доскроллит до карты. Так пишет web.dev, и так советуют how-to 2026: карту ниже первого экрана рядом с адресом, чтобы лендинг не тормозил.
Схема вечера:
Конструктор (метка + балун) → код iframe width 100% → правило map-embed.mdc → промпт в Agent → tel: и ссылка «маршрут» → проверка с телефона
Сделайте один блок под адресом. Не делайте: карту в hero и YOUR_API_KEY «на всякий случай». Добавьте loading=»lazy», если Agent забыл.
Свяжите карту с контактами и пройдите чек-лист с телефона
Клиент спросит «а где вы?» в мессенджере, если рядом нет действия. Добавьте кликабельный tel: и ссылку «Открыть маршрут в Яндекс.Картах» (из «Поделиться»). В реальном проекте балун с телефоном плюс tel: закрывают оба сценария: клик по метке и быстрый звонок.
Чеклист успеха без программиста:
- Откройте контакты или услуги – карта видна под адресом.
- Кликните метку: балун открывается, телефон читается.
- В коде есть loading=»lazy», width 100%, нет YOUR_API_KEY.
- С телефона карта на всю ширину и не обрезается.
- Рядом работают tel: и ссылка на маршрут.
- В проекте нет package.json и React «ради карты».
| Проверка | PASS | FAIL |
|---|---|---|
| Метка | Верный адрес, балун открывается | Пустой div или чужая точка |
| Адаптив | width 100%, высота ~400 | 600×400, обрезка на телефоне |
| Скорость | loading=lazy, ниже первого экрана | Виджет в hero без lazy |
| Стек | Только iframe/script Конструктора | npm, React, JS API v3, ключ |
Критерий успеха: на контактах или услугах видна интерактивная карта с верной меткой; iframe на всю ширину; на телефоне не обрезается; есть loading=lazy; балун открывается; рядом tel: или «маршрут»; нет package.json/React и нет обязательного API-ключа. Если так – виджет работает, а не пугает кабинетом разработчика.
Что сделать дальше сегодня
Закрепите результат коротким планом:
- После правок метки перекопируйте код из Конструктора.
- Держите map-embed.mdc, чтобы Agent снова не предложил React.
- Блок «О компании» рядом – по гайду страница о компании в Cursor.
- Перед публикацией ещё раз откройте страницу с телефона и кликните метку.
Если хотите быстрее собирать такие страницы без кода, загляните в курс Make.com и вайбкодинга на kv-ai.ru – там про Cursor и простые HTML-сайты.
Материал проверен: Артур Хорошев (CEO Maya AI, автор курса по Make.com и вайбкодингу).
Опора на источники: справка Конструктора карт (markers_2), docs maps-api/constructor, клуб API Карт про ключи в виджете, mapstools Яндекса, Cursor Docs Rules, web.dev lazy iframes; частотность «яндекс карта на сайт» и «яндекс конструктор карт на сайт» – по Яндекс Вордстат на 2026-07-10.
Частые вопросы
Нужен ли API-ключ для Яндекс.Карты на сайт?
Для базовой метки из Конструктора – нет. Скопируйте iframe или script без apikey и вставьте на страницу. Ключ добавляйте только если нужны поиск, маршруты или панорамы.
Чем iframe отличается от JS API?
iframe – готовое окошко из Конструктора без программирования. JS API v3 – код для разработчиков с ключом в quickstart. Сегодня берите вкладку iframe и не открывайте docs JS API.
Как вставить Яндекс.Карту на сайт в HTML через Cursor?
Скопируйте код из Конструктора, создайте map-embed.mdc и попросите Agent вставить iframe под адресом с width 100% и loading=lazy. Не принимайте package.json и React.
Можно ли поставить карту без отдельной страницы «Контакты»?
Да. Разместите виджет на лендинге или услугах рядом с адресом и tel:. Отдельная страница контактов удобна, но не обязательна для первого результата.
Почему карта-картинка хуже виджета?
Картинка не открывает балун и не даёт интерактив. Замените img на iframe из Конструктора, заполните балун телефоном и проверьте клик с телефона.
Что делать, если Cursor снова предлагает apikey и React?
Остановите генерацию, усильте map-embed.mdc с alwaysApply: true и повторите промпт: «только готовый iframe Конструктора, без npm и API-ключа». Не оставляйте YOUR_API_KEY в коде.
