Добавьте маршрут и заметки на свой сайт

Обычная встроенная карта показывает метку, но она не поможет гостю найти боковой вход, посетителю пройти от станции или покупателю узнать зону доставки. В Draw on a Map можно сначала нарисовать все эти детали, а затем встроить готовую карту на сайт. API-ключ и учётная запись не нужны.

Создайте карту и скопируйте код встраивания

1. Откройте Draw on a Map и найдите нужное место.
2. Нарисуйте маршрут, область, стрелки или заметки.
3. Выберите масштаб и переместите карту так, как её должны увидеть посетители при открытии. Встроенная карта откроется именно в этом виде.
4. Нажмите кнопку Встроить (</>) на верхней панели инструментов.
5. Выберите, куда вы вставите код: HTML, WordPress, Wix или Squarespace. В окне появятся инструкции для выбранной платформы.
6. Задайте высоту и нажмите Копировать код.
7. Вставьте код на страницу, опубликуйте её и проверьте на компьютере и телефоне.

В WordPress вставьте код в блок Произвольный HTML. В Wix добавьте Embed Code → Embed HTML. В Squarespace добавьте блок Code и выберите HTML.

Как выглядит код

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Встраивание карты Draw on a Map"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allow="geolocation"
  allowfullscreen></iframe>

Это шаблон. Скопируйте готовый код из окна «Встроить эту карту»: в нём значение src уже будет заполнено для вашей карты. Ширина карты подстраивается под колонку, в которой она размещена. Измените height, если на странице нужна карта большей или меньшей высоты.

На бесплатных встроенных картах отображается надпись «Работает на Draw on a Map». Чтобы убрать её, сохраните карту и перейдите на Pro.

Поддерживайте встроенную карту в актуальном состоянии

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

Код несохранённой карты хранит рисунок в URL. При редактировании карты этот рисунок не меняется. После правок снова нажмите Встроить, скопируйте новый код и замените старый iframe.

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

Если карта не отображается

Используйте блок, который принимает HTML или код iframe. Поле, предназначенное только для веб-адреса, не подходит для полного кода iframe. Если карта исчезает после публикации, возможно, конструктор сайта удаляет iframe. Проверьте его настройки для встроенного содержимого.

Идеи для карт на сайте

• Мероприятия и свадьбы: отметьте нужный вход, остановку трансфера и парковку на одной карте.
• Аренда жилья и путешествия: нарисуйте пеший путь от станции до квартиры или короткую дорогу к пляжу.
• Выездные услуги: нарисуйте зону, в которой вы работаете. Если посетителям нужно проверять свой адрес, платный Service Area Widget использует эту границу для проверки адресов на вашем сайте.

Создать карту для сайта

Другие руководства

• Как нарисовать круг на карте: отметьте зону доставки или обслуживания с точным радиусом
• Как рисовать на Google Картах: перенесите существующую карту из Google My Maps перед встраиванием
• Как поделиться своим пешеходным маршрутом: нарисуйте маршрут, который приложение для навигации прокладывает неправильно