Размещение карты с маршрутом из Яндекс.Карты
Вы можете подготовить карту с маршрутом до своего офиса и разместить в разделе с контактной информацией, используя систему управления UralCMS.
Видео: Размещение карты с маршрутом из Яндекс.Карты
Для работы с конструктором карт от Яндекс у вас должен быть предварительно создан аккаунт на Yandex.ru, который позволит добавлять и хранить карты в профиле для дальнейшей корректировки.
Выбор карты для редактирования
Авторизуйтесь в сервисе «Яндекс» и перейдите в конструктор карт по адресу:
Во всплывающем окне, выберите уже существующую карту или нажмите на кнопку «Создать карту».
С подробной информацией о создании новой карты в «Яндекс», вы можете ознакомиться в нашей инструкции: https://uralcms.ru/additional/script/maps/ya-maps/
Установка маршрута
Далее, в редакторе карты, нажмите на значок «Линии«.
Определитесь с координатами маршрута, поставьте курсор мыши на необходимую позицию на карте и, с помощью мыши, начинайте прокладывать линию до нужных координат на карте.
Чтобы закончить прокладку маршрута, кликните по текущей линии и нажмите «Завершить«. Для вашего удобства, вы также можете добавить метки с произвольными значениями.
По завершению этапа, нажмите — «Сохранить и продолжить«.
Размещение карты на сайте
После прохождения предыдущих этапов, вам потребуется завершить финальную настройку карты.
Настройте параметры отображения карты
Выберите тип карты и её размер.
Для того, чтобы карта вписалась аккуратно рекомендуем установить галочку «Растянуть по ширине«, а высоту при этом рекомендуем указать в пределах 300-400px.
Далее, нажмите на кнопку «Получить код карты«.
Размещение кода карты на странице сайта
Перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту. Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.
В открывшемся окне, разместите код карты.
Нажмите — «Обновить«, а затем сохраните раздел.
В редакторе сайта карта не отобразится, но на сайте она будет присутствовать — проверьте.
Как вставить Яндекс.Карту на сайт
Вы можете создать и вставить карту Яндекс со схемой проезда на свой сайт.
Видео: как добавить Яндекс.Карту на сайт
Обычно карту Яндекса подключают в раздел с контактной информацией, где помимо Яндекс.Карты есть телефон, электронная почта, местоположение и т.д. Вы сможете разместить схему проезда, но в отличии от статичной, карта от Яндекс является динамической и позволит вашему пользователю самостоятельно определить наиболее удобный маршрут движения. Добавление карты Яндекс на сайт бесплатно.
Как создать Яндекс.Карту для сайта
Для добавления Яндекс.Карты на сайт, перейдите в конструктор карт Яндекс для сайта по ссылке: https://tech.yandex.ru/maps/tools/constructor/. Авторизуйтесь, используя свой логин и пароль для создания и хранения карт на своем аккаунте, чтобы в дальнейшем вы могли бы изменить карту на сайте при необходимости.
Далее выполните следующие шаги:
Создание новой Яндекс.Карты
Для начала необходимо сделать карту Яндекса. При переходе в сервис, Вам будет предложено начать с создания новой карты в своем аккаунте. Выберите во всплывающем окне — Создать новую карту
Поиск адреса на карте
Далее, используя строку поиска, введите адрес местоположеня Вашей компании, офиса, магазина, с точностью до дома. Нажмите кнопку — Найти.
Используйте встроенные инструменты для подготовки изображения:
- измените масштаб
- добавьте в описание название компании и контактную информацию*
- измените цвет и тип маркера при необходимости
После внесения изменений, нажмите кнопку «Готово»
*Для того, чтобы контактная информация во всплывающей подсказке была размещена построчно, используйте в конце каждой строки (кроме последней) код для переноса строки —
Сохранение созданной карты
После того, как вы внесли информацию в описание, скорректируйте местоположение маркера на экране, путем захвата мышкой (кликнуть и удерживать) и перемещения по экрану. Разместите маркер по центру области, далее укажите название и описание карты, нажмите «Сохранить и продолжить».
Следующий шаг — финальная настройка виджета Яндекс.Карты для сайта и режима ее отображения на странице перед вставкой карты на сайт.
Перед тем, как встроить Яндекс.Карту на сайт, вам необходимо указать размер интерактивной карты, которая будет выводиться в разделе с контактной информацией. Для того, чтобы аккуратно интегрировать карту на сайт, рекомендуем установить галочку «Растянуть по ширине», а высоту при этом указать в пределах 300-400px.
Примечание! Мы лишь показываем пример подготовки карты для размещения на сайте, Вы также можете самостоятельно указать все настройки по своему усмотрению при необходимости.
Далее, нажмите кнопку «Получить код карты»
Скопируйте код карты для вставки на сайт из всплывающего окна для того, чтобы далее его разместить в HTML коде страницы сайта.
Как вставить код карты Яндекс для сайта в HTML
Чтобы вставить Яндекс.Карту на сайт в код HTML (и таким образом подключить Яндекс.Карты на сайт), перейдите в редактирование содержимого раздела, где вы хотите разместить интерактивную карту. Откройте HTML код страницы, кликнув по соответствующей иконке на панели инструментов.
В открывшемся окне, необходимо вставить код Яндекс.Карты со схемой проезда (как правило, добавляется в конце документа).
Вставьте код в конец содержимого (место размещения указано для примера — вы можете выбрать любое подходящее место в структуре страницы). Нажмите кнопку «Обновить».
PS: Вы можете не увидеть саму карту в редакторе сайта, но на сайте она должна отобразиться — проверьте.
Сохраните раздел после редактирования.
Теперь вы знаете, как добавить новую карту Яндекс, разместить Яндекс.Карту на сайте и установить для нее нужные вам параметры.
Как разместить Яндекс-карту у себя на сайте
Один из самых простых способов создать и разместить карту на сайте — это воспользоваться конструктором карт Яндекса.
Переходим по ссылке: https://yandex.ru/map-constructor/
Пишем название и описание. Ставим метку на карте или ищем место по адресу. Как только все будет готово, жмем кнопку «Сохранить и продолжить». Настраиваем параметры отображения карты. Например, растянем ее по ширине и поменяем масштаб. Получаем код карты нажатием на одноименную кнопку.
Копируем код из поля JavaScript и вставляем к себе на сайт. Вот и все. P.S. Если вам нужно сделать так, чтобы карта на сайте не масштабировалась при прокрутке колесика — замените в скрипте scroll=true на scroll=false
Конструктор карт Яндекса – еще один способ создать интерактивную карту
Один из самых простых способов создать и разместить карту на сайте — это конструктор карт Яндекса, бесплатный визуальный редактор, где легко сделать простую интерактивную карту. С помощью него вы сможете создать карту со своими объектами на базе Яндекс Карт, показать точки организации или схему проезда до офиса.
Для создания карты через конструктор не нужны особые навыки, все просто и понятно даже для новичков: создайте карту, получите код и разместите его на сайте.
Возможности конструктора карт:
- создать интерактивную карту, чтобы вставить на сайт или в приложение;
- поделиться в виде статичной картинки или подготовить изображение для печати;
- создать отдельные объекты и сохранить их в виде файла для дальнейшей обработки.
Как создать карту
Чтобы создать интерактивную карту, зайдите в конструктор (понадобится яндекс-почта), кликните на надпись «Создать карту» и добавьте объекты: метки, линии и многоугольники. Есть возможности кастомизации: меняйте тип и цвет объектов или дайте им название.
Линией вы можете показать маршруты, а многоугольниками — зоны, дома и другие площадные объекты. Можно менять цвет и прозрачность фигуры, изменять ее форму и перемещать ее в любую сторону с помощью мыши. В полигоне легко сделать внутренний контур, то есть дырку.
В конструктор можно добавить объекты из файлов KML, GPX, GeoJSON, CSV, XLSX. И наоборот, если вы поставили нужные точки в конструкторе, можно экспортировать их для использование в других программах.
Публикуем карту на сайте
Когда карта готова, нажимаем «Сохранить и продолжить». В появившемся окне нужно выбрать область отображения карты и формат.
- Интерактивная карта – пользователи могут взаимодействовать с элементами карты: передвигать ее, менять масштаб, кликать на объекты и читать их описание.
- Статическая карта – картинка в формате PNG для вашего сайта.
- Печатная карта – выводит изображение в высоком разрешении для печати.
Нажимаем «Получить код карты», копируем код и вставляем его на сайт. Если в дальнейшем нужно что-то изменить, вносите необходимые изменения в первоначальную карту и интерактивная карта будет обновляться автоматически. В коде карты можно настроить ширину и высоту карты в пикселях.