{"draftJsState":{"blocks":[{"data":{"image":{"id":"6a0f0578f5a822225d88f46e"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"89tva"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":321,"offset":0,"style":"ITALIC"}],"text":"Маршрут «как добраться» – один из самых частых вопросов, который поступает на горячую линию офлайн-бизнеса. Это значит, что страница контактов не справляется со своей задачей. Карта прямо на сайте закрывает этот вопрос без единого звонка: пользователь сам строит маршрут, оценивает расстояние и выбирает способ добраться.","type":"unstyled","key":"etlal"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":272,"offset":0,"style":"ITALIC"}],"text":"Вопрос «как добавить карту на сайт» решается за пять минут без программиста – Яндекс, Google и 2ГИС предоставляют готовый iframe-код. В руководстве разберём, как добавить интерактивную карту на сайт через каждый из сервисов, и покажем, как сделать её адаптивной и быстрой.","type":"unstyled","key":"8cg7m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Что даёт размещение карты на сайте?","type":"header-two","key":"dt0ra"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Размещение карты на сайте работает сразу в нескольких плоскостях.","type":"unstyled","key":"1dna0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":31,"offset":0,"style":"BOLD"}],"text":"Убирает барьер последнего шага. Человек нашёл вас, изучил сайт, готов приехать – и тут оказывается, что адрес не ведёт никуда конкретному. Карта прямо на странице снимает этот барьер: пользователь получает проезд, не покидая сайт.","type":"unordered-list-item","key":"fk5en"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Делает бизнес осязаемым. Текстовый адрес существует в вакууме – непонятно, это центр города или промзона за МКАДом. Карта мгновенно даёт пространственный контекст: район, соседние ориентиры, удалённость от метро. Это влияет на решение – ехать или нет.","type":"unordered-list-item","key":"5kljg"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":27,"offset":0,"style":"BOLD"}],"text":"Сигналы для локального SEO. Когда адрес и название компании совпадают на сайте и в профиле Яндекс.Бизнес (или Google Business Profile), поисковик получает подтверждение: данные актуальны и согласованы. Это один из факторов ранжирования для запросов с геопривязкой.","type":"unordered-list-item","key":"abud8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":26,"offset":0,"style":"BOLD"}],"text":"Разгрузка звонковой линии. Карта с кнопкой «Проехать» отвечает на вопрос «как добраться» раньше, чем клиент успеет найти номер и позвонить. Для компаний, которые принимают десятки посетителей в день, это ощутимое снижение нагрузки на менеджеров.","type":"unordered-list-item","key":"6o08e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":34,"offset":0,"style":"BOLD"}],"text":"Применение за пределами контактов. Карта полезна не только на одноимённой странице: схема охвата доставки, все адреса сети, зона выездного сервиса – для всего этого карта даёт нагляднее, чем список адресов текстом.","type":"unordered-list-item","key":"ccki9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":28,"offset":0,"style":"BOLD"}],"text":"Якорь для восприятия адреса. Когда пользователь видит знакомый интерфейс Яндекса или Google прямо на странице, он воспринимает адрес как подтверждённый: карта показывает реальную точку в городе, а не просто строчку текста. Для компаний без офиса в центре это особенно важно – пин на карте с фотографиями здания убирает сомнения в том, что по адресу реально кто-то есть.","type":"unordered-list-item","key":"epqs0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«На аудитах страниц контактов мы регулярно видим одно и то же: компании тратят бюджет на рекламу и SEO, а потом теряют клиентов на последнем шаге – человек не понял, где находится офис, и ушёл. Карта с проездом закрывает этот вопрос раз и навсегда.»","type":"blockquote","key":"ej6m4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":45,"offset":0,"style":"BOLD"}],"text":"— Руководитель отдела SEO-продвижения, Ingate","type":"blockquote","key":"8a80m"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как добавить карту Яндекс на сайт: пошаговая инструкция","type":"header-two","key":"lle5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"У Яндекса два сценария работы с картами: быстрая вставка через готовый виджет (подходит для 95% задач) и программная интеграция через JavaScript API (когда нужна кастомная логика). Разберём быстрый сценарий.","type":"unstyled","key":"bo6tn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":22,"offset":0,"style":"BOLD"}],"text":"Получение iframe-кода:","type":"unstyled","key":"9sog8"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зайдите на yandex.ru/maps и в поисковой строке сервиса введите адрес вашей компании или её название – так, как ищут обычные пользователи. Если организация зарегистрирована в Яндекс.Бизнес, появится её карточка с контактами и часами работы. Именно её и нужно использовать: тогда информация на встроенной карте будет обновляться автоматически вместе с профилем.","type":"unstyled","key":"66v4t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В карточке найдите кнопку «Поделиться» – она выглядит как стрелочка. Нажмите и выберите «Встроить карту». Откроется конструктор: здесь можно нажать на нужный масштаб, задать размеры блока и отключить лишние элементы управления. После настройки сервис генерирует готовый HTML-тег – скопируйте его и разместите в нужном месте страницы.","type":"unstyled","key":"vm3o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"3rbbv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ширину лучше сразу выставить 100% вместо фиксированных пикселей – карта сама подстроится под ширину родительского блока на любом экране.","type":"unstyled","key":"2voi0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для компаний с несколькими точками присутствия – сеть магазинов, офисов, складов – Яндекс предлагает отдельный веб-сервис: Конструктор карт. Он позволяет собрать карту с нужным набором маркеров прямо в браузере: расставить точки, добавить маршрут, закрасить зону. Создание не требует помощи разработчика. На выходе получается тот же iframe-код – вставьте его в страницу как обычно.","type":"unstyled","key":"epak1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как добавить карту Google на сайт: пошаговая инструкция","type":"header-two","key":"61n0o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Механика получения кода в Google Maps схожа с Яндексом, но интерфейс выглядит иначе. Откройте maps.google.com и найдите нужный объект. В левой боковой панели появится карточка – там нужно нажать значок «Поделиться» (Share). В диалоговом окне две вкладки: первая для ссылки, вторая – «Встроить карту» (Embed a map). Нажмите на неё.","type":"unstyled","key":"s3fu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Сервис покажет выпадающий список с вариантами размеров: Small, Medium, Large и Custom. Выберите Custom, если хотите задать собственные параметры. После этого появится кнопка «Копировать HTML» – в буфер обмена попадёт готовый код. Разместить карту на сайт можно прямо в HTML-редакторе страницы или через вставку в CMS.","type":"unstyled","key":"7jojm"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"hkq2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Google вставляет loading=\"lazy\" в скопированный код сам – это хорошая практика, сохраните её как есть.","type":"unstyled","key":"1auib"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для кастомных решений Google предоставляет два API: Maps Embed API и Maps JavaScript API. JavaScript API открывает возможности, недоступные через простой виджет: несколько точек на одной карте, динамическая подгрузка маркеров из базы данных, кастомные попапы с информацией. Для подключения нужен API-ключ из Google Cloud Console – он создаётся бесплатно, платить придётся только при превышении $200 бесплатного лимита в месяц.","type":"unstyled","key":"di4sh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":21,"offset":0,"style":"BOLD"}],"text":"Российская специфика: у части пользователей Google Maps не открывается без VPN. Если ваша аудитория преимущественно российская – это весомый аргумент в пользу Яндекса. Если всё же используете Google Maps, добаьте резервный блок с текстовым адресом: он будет виден всегда.","type":"unstyled","key":"9tah0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Ещё один момент: ссылка на Google Maps в iframe привязана к конкретному месту через координаты или place_id. Если компания переезжает или меняет профиль в Google Business Profile, ссылку нужно обновить вручную – автоматической синхронизации, как у Яндекса через профиль Яндекс.Бизнес, здесь нет. Стоит внести это в чеклист обновления сайта при смене адреса.","type":"unstyled","key":"5jncc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как добавить карту 2ГИС на сайт: пошаговая инструкция","type":"header-two","key":"b345v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"По полноте базы организаций 2ГИС в России объективно выигрывает у конкурентов, особенно в небольших городах. Это имеет значение для пользователей: если ваш адрес правильно отображается в 2ГИС, но не найден в другом сервисе, посетитель, привыкший к 2ГИС, найдёт вас быстрее именно здесь.","type":"unstyled","key":"gejc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":18,"offset":0,"style":"BOLD"}],"text":"Встраивание карты:","type":"unstyled","key":"2fph0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Зайдите на 2gis.ru и найдите карточку своей организации. В отличие от Яндекса, кнопка «Поделиться» у 2ГИС может располагаться не сразу на виду – в мобильной версии она иногда спрятана за три точки. На десктопе её проще найти в правом верхнем углу карточки. Нажимайте «Поделиться» и выбирайте «Встроить на сайт» – получите HTML-код. Вставьте его в нужное место на web-странице.","type":"unstyled","key":"a3mbk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Пример iframe-кода 2ГИС:","type":"unstyled","key":"1v7jd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"b7rar"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если вашей организации ещё нет в базе 2ГИС или информация устарела – сначала добаьте или обновите профиль в личном кабинете на сайте сервиса. Встроенная карта будет автоматически получать актуальные данные из этого профиля.","type":"unstyled","key":"8flg9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для более сложных задач доступен 2GIS API – он позволяет создавать интерактивные карты с маршрутами, кластеризацией точек, кастомными иконками и интеграцией с внешними источниками данных. Документация опубликована на сайте для разработчиков 2ГИС и содержит примеры кода на JavaScript.","type":"unstyled","key":"45k5q"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":19,"offset":0,"style":"BOLD"}],"text":"Пример из практики. Сеть медицинских клиник «Здоровье+» (условный пример) разместила на странице поиска филиала карту 2ГИС с 14 точками. При нажатии на маркер открывается карточка с адресом, телефоном и временем работы конкретного филиала. Создание такого виджета заняло у разработчика около двух часов – основное время ушло на получение API-ключа и настройку отображения карточек. Результат: пользователи стали на 18% реже звонить на общую линию с вопросами о расположении конкретного офиса.","type":"unstyled","key":"4ijko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Какую интерактивную карту лучше выбрать: Яндекс, Google или 2ГИС","type":"header-two","key":"4q3v4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Все три сервиса дают готовый код для встраивания и не требуют знания программирования для базовой установки. Разница проявляется в аудитории, надёжности и возможностях кастомизации.","type":"unstyled","key":"8sori"},{"data":{"image":{"id":"6a0f06b7151aa43afc6e8dc0"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"3eus1"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"eo2vq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":12,"offset":0,"style":"BOLD"}],"text":"Яндекс Карты – оптимальный выбор для большинства российских сайтов. Хорошая аудитория, стабильная работа, богатый конструктор с созданием карт под нужды бизнеса. Яндекс выигрывает там, где пользователи активно пользуются экосистемой: Навигатором, поиском, Яндекс Бизнесом.","type":"unordered-list-item","key":"fr11n"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":24,"offset":0,"style":"BOLD"}],"text":"Гугл Карты (Google Maps) сохраняют актуальность для сайтов с международной аудиторией или пользователями, которые принципиально работают в экосистеме Google. Если ваша аудитория – преимущественно россияне старше 35 лет, использующие Яндекс как основной браузер, Google Maps даст меньше отдачи.","type":"unordered-list-item","key":"6s8lh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":4,"offset":0,"style":"BOLD"}],"text":"2ГИС выигрывает в регионах и там, где нужна максимальная полнота данных. Хорошо подходит для ритейла, медицины, сервисных компаний – любого бизнеса с разветвлённой сетью точек по всей России. Для таких компаний сделать 2ГИС основной картой на странице контактов – правильное решение.","type":"unordered-list-item","key":"a4aqn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Если сайт ориентирован на широкую российскую аудиторию – достаточно одной карты Яндекса. Если хотите охватить разные сегменты, можно разместить две карты на одной странице: это не запрещено и не создаёт технических проблем, главное – не грузить обе без lazy-load.","type":"unstyled","key":"5tbqu"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Прежде чем встраивать карту – убедитесь, что карточка организации в самом сервисе заполнена корректно. Название компании, адрес и часы работы должны совпадать с тем, что написано на сайте. Расхождение в адресе – это сигнал для алгоритмов локального поиска, что данные ненадёжны: два разных написания одной улицы в профиле Яндекс.Бизнес и на сайте снижают шансы попасть в локальную выдачу. Синхронизировать данные можно в личном кабинете каждого сервиса – это занимает несколько минут, но напрямую влияет на то, как часто вас показывают по геозависимым запросам.","type":"unstyled","key":"8e9fe"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как оптимизировать интерактивную карту на сайте?","type":"header-two","key":"dd3hi"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Три технических момента, о которых часто забывают при добавлении карты – и которые влияют на скорость страницы и вид на мобильных устройствах.","type":"unstyled","key":"39nkn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Отложенная загрузка карты lazy-load","type":"header-three","key":"cbp4"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Карта в iframe весит немало: тайлы, скрипты, данные об организациях. Когда пользователь открывает страницу, браузер тянет всё это разом – даже если карта где-то внизу и человек до неё вообще не доберётся. Один атрибут меняет логику загрузки:","type":"unstyled","key":"5s4fq"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"cheqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Значение lazy переводит загрузку в отложенный режим: виджет стартует только тогда, когда оказывается в зоне видимости. Никаких сторонних библиотек – атрибут поддерживается браузером нативно.","type":"unstyled","key":"ctikt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для старых браузеров – IE и Safari до 15.4 – потребуется JavaScript-решение на IntersectionObserver или готовую библиотеку вроде lazysizes.","type":"unstyled","key":"an250"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Альтернатива: показывать вместо iframe статичный скриншот карты, а сам виджет подгружать только по клику. Карта загружается позже, зато страница открывается значительно быстрее – особенно на мобильном с нестабильным сигналом.","type":"unstyled","key":"40n3v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как растянуть карту по ширине экрана?","type":"header-three","key":"fqc6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Стандартный iframe из конструктора карт имеет жёстко заданную ширину в пикселях – например, width=\"600\". На экране 375px (типичный смартфон) такой блок либо обрезается, либо вызывает горизонтальную прокрутку страницы. Оба варианта плохи. Решение – убрать жёсткую ширину и использовать CSS-обёртку:","type":"unstyled","key":"4m0ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".map-container {","type":"unstyled","key":"95pgv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: relative;","type":"unstyled","key":"vp21"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"unstyled","key":"fo7gb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 0;","type":"unstyled","key":"brll2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"padding-bottom: 50%;","type":"unstyled","key":"aaina"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"1bac0"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".map-container iframe {","type":"unstyled","key":"e96co"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"position: absolute;","type":"unstyled","key":"a9rqr"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"top: 0;","type":"unstyled","key":"3lp2p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"left: 0;","type":"unstyled","key":"ackn"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"unstyled","key":"8rp83"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"height: 100%;","type":"unstyled","key":"6jar5"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"d3kev"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"

","type":"unstyled","key":"39hur"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как работает этот приём: блок-контейнер занимает 100% ширины родителя, а его высота задаётся через padding-bottom в процентах – браузер считает её относительно ширины. При 50% карта получает соотношение сторон 2:1. Хотите карту повыше – 65–70%; нужна широкая горизонтальная полоса – 30–35%.","type":"unstyled","key":"duevh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Как разместить карту по центру экрана?","type":"header-three","key":"dfimh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Когда карта должна занимать не всю ширину, а часть – например, 800 из 1200 доступных пикселов – её нужно прижать к центру. Проще всего через обёртку с ограничением по ширине и автоматическими отступами:","type":"unstyled","key":"1tidv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".map-wrapper {","type":"unstyled","key":"f6p7l"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"max-width: 900px;","type":"unstyled","key":"8jm2v"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"width: 100%;","type":"unstyled","key":"ca1lb"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"margin: 0 auto;","type":"unstyled","key":"5gvmh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4qf6t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"В проектах с Flexbox центрирование достигается через родительский блок:","type":"unstyled","key":"eq4qt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":".contacts-block {","type":"unstyled","key":"57btt"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"display: flex;","type":"unstyled","key":"8b5tv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"justify-content: center;","type":"unstyled","key":"b15ql"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"}","type":"unstyled","key":"4ue3d"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Для тех, кто работает в конструкторах сайтов – Tilda, WordPress, Битрикс – никакого кода не нужно: выравнивание блока задаётся через интерфейс. Найдите параметр «выравнивание» или «alignment» в настройках блока и выберите «по центру».","type":"unstyled","key":"a8h1r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":66,"offset":0,"style":"BOLD"}],"text":"Три момента, которые стоит проверить после добавления любой карты:","type":"unstyled","key":"c6m2r"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Откройте страницу с мобильного – карта должна вписываться в экран без горизонтальной прокрутки.","type":"unordered-list-item","key":"356gd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Добавьте к iframe атрибут title с описанием содержимого: это требование доступности и хорошая практика для HTML-валидации.","type":"unordered-list-item","key":"7m38t"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Убедитесь, что высота карты достаточна на маленьком экране – 300px минимум, иначе пользователь не сможет нормально взаимодействовать с виджетом.","type":"unordered-list-item","key":"12d6o"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"«Самая частая техническая ошибка с картами – отсутствие адаптивности. Владелец добавил карту 600×400 через iframe, и на десктопе всё выглядит хорошо. А на мобильном – половина карты обрезана. Проверяйте страницу контактов на смартфоне сразу после добавления карты, до публикации.»","type":"blockquote","key":"1hre6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":33,"offset":0,"style":"BOLD"}],"text":"— Старший web-разработчик, Ingate","type":"blockquote","key":"38v4s"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Создание и оптимизация сайтов со специалистами Ingate","type":"header-two","key":"ank1r"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":13,"offset":7},{"key":1,"length":10,"offset":23},{"key":2,"length":15,"offset":289}],"inlineStyleRanges":[{"length":15,"offset":289,"style":"BOLD"}],"text":"Ingate разрабатывает и продвигает сайты с учётом технических требований поисковых систем: скорость загрузки, мобильная адаптация, корректная интеграция сторонних сервисов. Нужно быстро вставить карту на сайт или настроить кастомный виджет с маркерами, кластеризацией и интеграцией с CRM – оставьте заявку, разберёмся.","type":"unstyled","key":"32p9p"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"4j467"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"dubim"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"aMjrMnPvXQJWnQBwk79X"}],"entityMap":{"0":{"data":{"url":"https://ingate.ru/development/sozdanie-sajta-pod-klyuch/?utm_source=dzen.ru&utm_medium=smm_ingate&utm_campaign=article_dobavit-kartu-na-sayt"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"url":"https://ingate.ru/uslugi/seo/?utm_source=dzen.ru&utm_medium=smm_ingate&utm_campaign=article_dobavit-kartu-na-sayt"},"mutability":"MUTABLE","type":"LINK"},"2":{"data":{"url":"https://t.me/Ingate_Group_Bot?start=dzen_article"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}