Как создать свою карту — полное руководство по онлайн-конструкторам

Карта на сайте — не просто адрес в Яндекс Картах. Клиенту нужно увидеть, где парковка, какой корпус, где ближайшая точка сети или в какое кафе лучше зайти по маршруту. Стандартная карта из поисковика этого не показывает. В материале — как создать карту, которая работает под ваши задачи. Интерактивную со схемой проезда — через конструктор Яндекса. Сотню меток из Excel — через Google My Maps. Стилизованную карту для печати — в графическом редакторе или специальном сервисе.

Зачем создавать свою карту: популярные цели

Готовая карта из поисковика показывает только адрес. Без меток, без уточнений, без визуального выделения своих точек. Создавать собственную карту нужно, когда стандартного решения недостаточно. Разберем на примерах.

Схема проезда на сайте. Клиент открывает карточку компании и видит адрес. Но ему еще нужно понять, как лучше подъехать, где парковка и через какой вход можно попасть в компанию. На собственной карте можно выделить корпус, показать ближайшую парковку, обозначить ориентиры. Это сокращает звонки с вопросами «как проехать».

Карта филиалов и точек продаж. У компании может быть пять офисов или сеть из двадцати магазинов. Можно показать их на одной карте с информацией о каждом: адрес, телефон, часы работы. Пользователь приближает нужный район и видит ближайшую точку. Это удобнее, чем список адресов текстом.

Туристический маршрут. Агентство готовит экскурсию — нужно показать последовательность достопримечательностей, соединить их линией и добавить описания. Или блогер выпускает гайд по городу и хочет нанести на карту кафе, музеи и смотровые площадки.

Карта для мероприятия. Конференция, фестиваль или свадьба. На карте отмечают вход, сцену, фуд-корт, туалеты, аптечку. Гости сканируют QR-код и им становится намного проще ориентироваться на месте.

Визуализация данных. Продажи по регионам, плотность клиентов, география заказов. На карте это выглядит наглядно: цветом выделены регионы с разными показателями, размером метки — объемы продаж. Такой подход заменяет скучные таблицы.

Логистика и зоны доставки. Служба доставки, интернет-магазин или сервис такси отмечают на карте границы обслуживания, расположение складов, оптимальные маршруты. Это помогает диспетчерам и клиентам видеть, куда везем и откуда выезжаем.

Застройка и недвижимость. Девелопер или агентство недвижимости наносят на карту расположение жилого комплекса, ближайшие школы, парки, транспортную доступность. Можно подсветить цветом разные очереди строительства или доступные лоты. Покупатели сразу видят инфраструктуру без дополнительных вопросов.

В статье — три способа создать такую карту. От простой вставки на сайт через конструктор Яндекса до рисованной карты в графическом редакторе. Разбираем плюсы, минусы и подходящие сценарии.

Способ 1: конструктор карт Яндекса (лучший вариант для сайта)

Конструктор карт Яндекса — бесплатный веб-инструмент, в котором можно создать интерактивную карту онлайн бесплатно и без навыков программирования. Визуальный редактор: нарисовали карту, добавили объекты и вставили готовый код на сайт. Подходит для схемы проезда, филиалов сети, маршрутов и зон доставки.

Как сделать интерактивную карту. Сначала — завести аккаунт Яндекса. Он будет нужен для входа в конструктор и сохранения карты. Если аккаунта нет, создается бесплатно по почте или номеру телефона.

Шаг 1. Переходим в Конструктор и создаем новую карту

Для этого открываем страницу https://yandex.ru/map-constructor/ и кликаем на «Создать карту»:

В левой верхней части экрана нужно добавить название для карты и при необходимости — ее описание. Так вы сможете в любой момент разобраться в своих проектах. Без названия вы быстро начнете путаться в списках карт «без названия»:

После этого открывается интерфейс конструктора: основная область с картой, инструменты в верхнем левом углу, список объектов слева. Максимальное количество объектов на одной карте — 10 000.

Шаг 2. Добавляем объекты: метки, линии и многоугольники

Все объекты добавляются через кнопки в верхнем левом углу конструктора. Для каждого есть горячие клавиши, ускоряющие работу.

Метки. Инструмент Метка — для выделения конкретных точек на карте: офисы, магазины, достопримечательности, остановки. Добавление: активировать инструмент, найти нужное место (ввести адрес в поиск или переместить карту вручную), кликнуть по нему — метка появится.

Линии. Инструмент Линия — для обозначения маршрутов, улиц, границ, линейных объектов. Добавление: активировать инструмент, последовательно кликать по точкам на карте, прокладывая линию нужной формы. После завершения кликнуть правой кнопкой на последней вершине и выбрать «Завершить».

Многоугольники. Инструмент Многоугольник — для выделения закрытых областей: зон доставки, районов, жилых комплексов. Добавление: активировать инструмент, последовательно кликнуть по точкам, формирующим фигуру, и замкнуть контур — первый и последний клик соединятся. Завершить многоугольник кликом правой кнопкой на последней вершине.

Многоугольнику можно добавить внутренний контур — отверстие внутри фигуры. Например, граница района с исключенной территорией. Для этого кликнуть правой кнопкой на любой вершине многоугольника и выбрать «Добавить внутренний контур». Если объект насчитывает более тысячи вершин, можно автоматически упростить его («Упростить линию» или «Упростить контур»), чтобы уменьшить количество точек при минимальной потере формы.

Шаг 3. Настраиваем внешний вид: цвет, иконки, описания

Каждый добавленный объект можно отредактировать. Кликнуть левой кнопкой по объекту на карте или в левом списке — откроется окно настроек.

Для меток настраивается:

• Цвет и форма. Доступны стандартные цвета и типы маркеров — круг, точка, флаг.

• Иконка. Можно загрузить свою иконку из файла или выбрать из библиотеки конструктора.

• Подпись. Текст, который будет отображаться на карте рядом с меткой. Подходит для названия организации.

• Текст описания. Отображается по клику на метку. Здесь можно указать адрес, телефон, часы работы, а также использовать HTML-разметку для вставки картинок и ссылок.

Для линий настраивается: цвет, толщина и прозрачность.

Для многоугольников настраивается: цвет контура и заливки, прозрачность, толщина линии контура.

Шаг 4. Сохраняем карту и получаем код для вставки на сайт

Когда карта готова — нажать кнопку «Сохранить и продолжить» слева снизу.

Выбор типа карты. Конструктор предлагает три варианта:

1. Интерактивная. Карта с возможностью перемещения, масштабирования и кликабельными объектами. Вставляется на сайт через JavaScript-код. Подходит для большинства задач — схема проезда, филиалы, маршруты, адреса и контакты офисов.

2. Статическая. Обычная картинка в формате PNG. Подходит, если карта не требует взаимодействия.

3. Печатная. Изображение высокого разрешения для печати на бумаге.

Настройка размеров. Указать ширину и высоту карты в пикселях или растянуть по ширине родительского блока («Растянуть по ширине»).

Получение кода. Нажать «Получить код карты». Для интерактивной карты конструктор формирует код на JavaScript. Скопировать его и вставить на сайт в нужное место.

Важные нюансы. Код карты можно менять. Если изменить исходную карту в конструкторе, карта на сайте обновится автоматически. В коде можно донастроить параметры — язык интерфейса, ширину, высоту и другие. Карту можно адаптировать под разные экраны, но поведение нужно отдельно проверять на мобильных устройствах.

Способ 2: Google My Maps — альтернатива с интеграцией Google Диска

Конструктор Яндекса хорош для вставки на сайт. Но если нужно загрузить сотню адресов из Excel, работать с командой над общей картой или использовать данные в Google Earth — пригодится инструмент от Google. My Maps уступает в гибкости оформления, но выигрывает в работе с большими объемами данных и совместном редактировании. Разбираем основные отличия и даем краткую инструкцию.

Основные отличия и преимущества

Google My Maps — это бесплатный конструктор карт от Google. Созданные карты хранятся в Google Диске и тесно связаны с экосистемой Google. По сравнению с конструктором Яндекса, у него другие приоритеты и набор возможностей.

Основные отличия:

• Хранение и импорт данных. My Maps работает с Google Таблицами «из коробки». Можно загрузить список адресов в формате CSV или XLSX, и сервис автоматически расставит метки. Это огромное преимущество, когда нужно нанести на карту сотню точек из базы клиентов.

• Ограничения по объектам. На одной карте можно разместить до 10 000 объектов (линий, фигур или меток). На один слой — не более 2 000 объектов и до 50 000 точек в линиях и фигурах. Для большинства бизнес-задач этих лимитов достаточно, но если нужно отобразить, например, всю базу из 200 000 точек, My Maps не подойдет.

• Совместная работа. Картой легко делиться. Можно настроить доступ на редактирование для коллег или на просмотр для клиентов.

• Экспорт и интеграция. Карту и данные к ней можно выгрузить в формате KML/KMZ для использования в Google Earth или других приложениях. Данные слоя можно скачать в формате CSV.

• Стилизация. Доступна базовая настройка: выбор цветов меток и линий. Но кастомизация значительно уступает конструктору Яндекса. Нельзя так же гибко менять иконки и детально настраивать каждый объект.

Обратите внимание. My Maps тоже позволяет встраивать карту на сайт через iframe. Этот способ проще, но не такой гибкий, как встраивание через JavaScript-код у Яндекса.

Краткая инструкция по созданию карты

Сначала нужно авторизоваться в Google-аккаунте и перейти на страницу mymaps.google.com.

Для создания карты нажмите кнопку «Создать новую карту» в левом верхнем углу. Появится новая карта с одним слоем «Без названия». При создании карты и слоя лучше сразу присваивать им понятные названия, чтобы потом не путаться.

Что можно делать в карте My Maps:

• Импортировать данные (опционально). Под слоем нажать «Импорт». Выбрать файл (CSV, XLSX, KML, GPX, Google Таблицу) или папку с фото. My Maps предложит сопоставить столбцы файла с типами данных. Самый простой способ — если в файле есть столбцы с координатами (широта/долгота) или полными адресами, а также название метки и описание.

• Добавлять объекты вручную. Включить инструмент «Добавить маркер», кликнуть по нужному месту на карте, ввести название и описание. Используя инструменты «Добавить линию» или «Добавить фигуру», можно рисовать на карте маршруты и выделять области.

• Настроить внешний вид. В легенде навести курсор на нужный слой и нажать значок карандаша для редактирования стиля. Можно выбрать единый стиль для всех объектов или задать разные стили в зависимости от данных (например, раскрасить метки по категориям).

• Вставить карту на сайт. Сделать свою карту публичной (в настройках доступа выбрать «Включено» для ссылки). В левом меню перейти в раздел «Встроить на сайт» или «Опубликовать». Скопировать сгенерированный HTML-код и вставить его на свою страницу.

В сервисе также доступна совместная работа. Для этого нужно нажать на «Поделиться» в верхней части экрана. В открывшемся окне добавить адреса электронной почты, выбрав нужный уровень доступа (редактирование или просмотр), или получить ссылку для публичного доступа.

Способ 3: Как «нарисовать» неинтерактивную, стилизованную карту

Интерактивные карты хороши для сайтов и мобильных приложений. Но иногда нужна карта, которую можно распечатать на баннере, вставить в презентацию или опубликовать как иллюстрацию. Для таких задач подходят неинтерактивные, а готовые изображения — их создают в графических редакторах или специальных сервисах.

Разница — в назначении. Интерактивная карта позволяет пользователю строить маршрут, самостоятельно искать, приближать и перемещаться по ней. Нарисованная карта — это готовое изображение, которое дополняет текст, помогает сориентироваться на мероприятии или украшает презентацию. Первая отвечает на вопрос «где находится», вторая — «как туда добраться».

Графические редакторы: Figma и Photoshop

Графические редакторы дают полную свободу: любой стиль, любая детализация, любые цвета и шрифты. Но и времени требуют значительно больше, чем конструкторы.

Figma — бесплатный и наиболее популярный вариант. Она работает в браузере и позволяет нескольким участникам редактировать карту одновременно, что удобно для командной работы.

Вы начинаете с загруженной карты-подложки (скриншот из Яндекс Карт или Google Maps) либо рисуете ее с нуля. Затем добавляете на слой метки: круги, прямоугольники, иконки.

Для каждого объекта настраиваете цвет, прозрачность, тени. Финальный результат экспортируете в PNG, JPG, PDF или SVG. Минус: у Figma нет географической привязки — масштаб и расстояния придется проверять вручную.

Adobe Photoshop — классический растровый редактор для детальной проработки. Позволяет использовать различные кисти, накладывать текстуры, создавать сложные эффекты. Хорошо подходит для стилизации под старину (свитки, потертости) или создания художественных схем.

Преимущества этого пути — полная кастомизация, высокое качество для печати, возможность работать с векторной графикой. Недостатки — нужно осваивать редактор, подготовка занимает часы, а для каждой новой карты процесс повторяется с самого начала.

Специализированные сервисы для создания фэнтези-карт или инфографики

Если нужна не географически точная карта, а художественная или аналитическая, проще использовать профильные онлайн-сервисы. Они делятся на два типа.

Фэнтези-карты. Эти инструменты используют авторы книг, сценаристы настольных игр и геймдизайнеры. Они создают уникальные миры, не привязанные к реальной географии. Наиболее известные сайты для создания таких карт — Inkarnate и Azgaar’s Fantasy Map Generator.

В них можно рисовать континенты, добавлять леса и горы несколькими кликами, менять цветовые схемы, генерировать названия для городов.

• Inkarnate предлагает готовые библиотеки значков и стилей — карта мира, города, локации.

• Azgaar создает карту процедурно (алгоритмически) на основе заданных параметров — количества городов, континентов, культур.

Бесплатных версий хватает для базовых карт, за расширенные возможности и экспорт в высоком разрешении требуется плата.

Инфографика и визуализация данных. Для бизнеса чаще нужны не вымышленные миры, а карты, показывающие данные: продажи по регионам, плотность клиентов, географию заказов. Здесь помогают сервисы визуализации:

• Datawrapper — бесплатный онлайн-конструктор (есть платные тарифы для команд). Загружаете данные в CSV или Google Таблицу, выбираете тип карты (хороплет или точечную), настраиваете цветовую шкалу и подписи. Сервис строит карту, которую можно встроить на сайт или скачать как изображение. Для простой карты достаточно двух шагов: загрузить данные → выбрать дизайн.

• Infogram и Visme — более тяжелые инструменты для профессиональной инфографики. Поддерживают анимацию, экспорт в PDF и форматы для печати. Используют маркетологи и редакторы, которым нужно совмещать карту с диаграммами и текстом в одном отчете.

• Tilemapper — простой российский сервис для создания плиточных хороплет-карт по данным CSV (регионы → цвет). Бесплатный, не требует навыков программирования

• Map Creator by MEBLEOS — платформа для создания дизайнерских постеров и 3D-моделей любой точки Земли. Хорошо подходит для интерьеров и сувениров.

Сравнительная таблица: какой сервис выбрать

Выше мы разобрали три способа создания карт под разные задачи. Конструктор Яндекса — для интерактивной карты на сайте. Google My Maps — для совместной работы и импорта адресов из таблиц. Графические редакторы и специализированные сервисы — для печатных карт, уникального дизайна или визуализации данных. В таблице собрали ключевые параметры, чтобы выбрать подходящий вариант.

Как вставить созданную карту на свой сайт

Карта готова, осталось поместить ее на страницу. Оба конструктора — Конструктор карт Яндекса и Google My Maps — выдают код для встраивания. Яндекс формирует JavaScript-скрипт, Google — iframe. Процесс вставки зависит от платформы, на которой работает сайт.

Вставка на сайт на WordPress

После того как в конструкторе карта сохранена и получен код для встраивания, нужно вставить его в нужную страницу или пост. WordPress по умолчанию не всегда корректно отображает JavaScript-код в визуальном редакторе — может вырезать теги или «испортить» код. Поэтому потребуется ручная вставка через текстовый режим.

Как это сделать. В админ-панели WordPress откройте нужную страницу или пост в редакторе — блочный редактор Gutenberg или классический.

Для Gutenberg:

• Нажмите плюс «+» и выберите блок «Произвольный HTML» (Custom HTML).

• Вставьте скопированный код из конструктора и нажмите «Сохранить».

• Этот блок лучше всего подходит, так как он не изменяет вставленный код и позволяет работать с картой как с единым элементом.

• Просмотрите страницу, чтобы убедиться, что карта отображается корректно.

В классическом редакторе переключитесь в текстовый режим и вставьте код в место, где должна быть карта.

Важный нюанс: при обновлении карты в конструкторе (добавили метку или проложили новый маршрут) перевставлять код на сайт не нужно — изменения отобразятся автоматически. Код нужно обновлять только при смене масштаба, типа карты или ее размеров.

Вставка на сайт на Tilda

Tilda предлагает собственные блоки для работы с картами, но они подходят для простых случаев: один адрес, одна метка. Если карта создана в конструкторе с несколькими объектами (линии, полигоны, много точек), использовать готовые блоки Tilda не получится — придется вставлять кастомный код.

Через блок «HTML-код» — это самый универсальный способ:

1. Откройте редактор нужной страницы.

2. Добавьте блок → выберите в категории «Другое» блок T143 «HTML-код» или Zero Block.

1. Вставьте скопированный из конструктора код (JavaScript или iframe).

2. Для корректного отображения на карте поиска, маршрутов и панорам может потребоваться API-ключ для Яндекс Карт. Если карта не отображается или выдает ошибку, получите ключ в кабинете разработчика Яндекса и добавьте его в настройках сайта: Настройки сайта → Еще → Ключи от API карт.

3. Сохраните страницу и опубликуйте.

Если карта отображается некорректно или не реагирует на клики, проверьте: блок с кодом должен находиться вне контейнера с фиксированной высотой.

А еще в конструкторе карт Яндекса можно включить адаптивный режим «по ширине». Тогда карта будет растягиваться на весь экран на мобильных устройствах и не обрезаться.

В остальном код для Tilda работает так же, как и для WordPress. Главное — опубликовать страницу и проверить карту на мобильном устройстве: масштабируется ли она, не вылезает ли за границы экрана.

Часто задаваемые вопросы (FAQ)

Собрали ответы на частые вопросы, которые возникают при создании и публикации пользовательских карт.

Можно ли добавить на карту много меток, например, из файла Excel?

Это возможно, но не во всех конструкторах. Например, Google My Maps поддерживает импорт. Загрузите файл в формате CSV, XLSX или Google Таблицу с адресами или координатами. Сервис сам расставит метки. На одну карту — до 10 000 объектов, на слой — до 2 000.

Конструктор карт Яндекса также умеет импортировать данные из файлов, а еще здесь можно добавить метки вручную — кликом по карте или поиском адреса. Это подходит для 10–20 точек, но не для сотен.

Как сделать карту доступной только по ссылке?

Это можно настроить в любом конструкторе. В Google My Maps нужно выбрать в настройках «Только те, у кого есть ссылка». Карта не будет индексироваться поисковиками и не откроется без прямой ссылки.

В конструкторе Яндекса карта изначально приватная и доступна только владельцу. Чтобы поделиться, нужно нажать «Опубликовать» или «Поделиться», тогда сформируется ссылка. До публикации карту никто не увидит.

Будет ли карта работать на мобильных устройствах?

В обоих конструкторах можно создать карту, адаптивную для мобильных:

• Сервис Яндекс Карты на мобильных устройствах поддерживает мультитач (приближение двумя пальцами), реагирует на клики по меткам, открывает балуны с описанием. При встраивании на сайт можно задать ширину в процентах (например, width: 100%), чтобы карта растягивалась по ширине экрана.

• Google My Maps через iframe тоже работает на телефонах, но масштабирование и управление может быть менее плавным. Рекомендуется проверять карту на мобильном перед публикацией и при необходимости корректировать размеры в коде вставки.