Как создать карту проезда для сайта в Яндекс конструкторе

Как создать карту проезда для сайта в Яндекс конструкторе Хостинг

Зачем нужна карта яндекс на сайте

Ранее мы уже писали о коммерческих факторах ранжирования сайтов в поиске Яндекса. Один из них – это полный адрес, в том числе карта (желательно интерактивная) на странице с контактами.

Но это только одна из причин, почему вам необходима карта на веб-ресурсе.

Она нужна и для других целей:

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

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

Статья в тему:Как добавить сайт в Гугл Мой Бизнес

Как вставить карту на сайт на wordpress

Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты». У нас на этой странице уже написан наш адрес, телефон, а внизу под всем контентом будет размещаться карта.

Заходим в административную панель сайта. Переходим в раздел «Страницы»:

Затем находим там нашу страницу «Контакты» и выбираем «Изменить». Переключаем редактор из режима «Визуальный» в «Текст». В конструкторе карт выбираем код iframe и копируем его:

В самом низу, после текста, вставляем этот код и обновляем страницу. 

Вот теперь наша карта на сайте:

Отредактировать ширину и высоту можно прямо в коде, который дал Яндекс (теги width, height – задаем нужное числовое значение в кавычках).

Еще один вариант размещения карты, который часто используется на лендингах  — вставить карту в футер (подвал) сайта. Для этого нужно будет отредактировать HTML-код страницы, вставив туда предложенный конструктором код.

На WordPress отредактировать футер можно через админпанель. Зайдите Внешний вид – Редактор – Подвал:

Чтобы отредактировать файл, нужно иметь хотя бы базовые знания HTML. Если с этим у вас все не так хорошо, лучше доверьте работу веб-разработчику (найти умельца можно даже на фрилансе).

Как добавить карту на сайт или на страницу контакты

Как я уже писала выше, после создания карты нужно скопировать код и встроить его на сайт.

После того, как создали карту, нажимаем «Получить код карты». Вы увидите кусочек кода, который нужно встроить в сайт.

Обычно карту на сайте размещают:

  • На странице «Контакты»;
  • В подвале (футере) сайта;
  • Реже – на главной странице или странице «Доставка и оплата» (в основном, если речь идет о самовывозе).

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

Как нарисовать схему проезда на яндекс.картах

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

Затем предлагаю поставить еще и метку, указывающую на офис. Выбираем инструмент «Метки», и ставим метку, просто кликнув мышкой в нужном месте. Затем настраиваем метку: пишем описание, выбираем цвет и тип.

Нажимаем «Сохранить и продолжить».

Дальше указываем тип карты:

  • Интерактивная – можно увеличить, уменьшить, полноценно взаимодействовать с картой;
  • Статичная – будет на сайте в виде простой картинки. Подойдет в том случае, если вы знаете, что у вашей ЦА в основном медленное соединение.

Лучше, конечно же, использовать интерактивную карту.

Как создать карту яндекс в конструкторе

Чтобы встроить карту Яндекса, нужно:

  • Создать карту в конструкторе;
  • Получить код карты;
  • Вставить код на сайт (он подходит для сайтов на любой CMS).
Читайте также:  Пассивный прокси zabbix и глава 3. Агенты abbix и основные протоколы. Следите за агентами

Для создания карт есть специальный сервис – Конструктор карт Яндекс.

Если у вас есть почта на Яндексе, вы можете перейти на сервис и сразу приступать к созданию карты. Нажмите кнопку «Создать карту».

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

Давайте попробуем создать карту. Рассмотрим пример: ваш офис находится в 10 минутах ходьбы от метро. Вы хотите указать на карте маршрут от метро до своего офиса.

Первым делом называем и задаем описание своей карты (не обязательно; но так будет удобнее, особенно если карт будет несколько).

Затем приступаете к редактированию карты. На карте вы можете:

  • Ставить метки;
  • Рисовать линии и многоугольники;
  • Указать информацию о пробках (подтягивается автоматически, об этом позаботится сам Яндекс);
  • Создавать слои.

Как создать яндекс.карту для своего сайта?

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

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

Вставить карту на сайт можно несколькими способами:

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

Каждому владельцу сайта стоит указать свою метку на Яндекс.Картах. Это связано с тем, что:

  • Людям значительно проще сделать заказ, когда им облегчают жизнь. Они сразу знают куда идти, и не приходится искать дополнительные сведения.
  • Клиенты могут случайно зацепиться взглядом за название вашей компании и запомнить его на будущее, пока просматривают территорию в поисках совершенно другого места.
  • Не стоит забывать о психологическом факторе: если указаны полные сведения в контактах, да еще и отмечено местоположение, значит этой фирме нечего скрывать.

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

Кроме того, по сравнению со статичной картинкой, на которой видно только местоположение, с помощью интерактивной карты:

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

Проще говоря, у сервиса множество преимуществ. Его использование также не станет проблемой. О том, как добавить Яндекс карту на сайт, читайте далее.

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

Далее идем в конструктор.

Открываем конструктор Яндекс.Карт. Перед пользователем появляется окно навигации. Снизу идет перечень созданных ранее карт, который запомнил Яндекс, (созданных с текущего аккаунта). Здесь указана дата и время сохранения, а также название карты. Если пользователь никак не назовет новый файл, по умолчанию он сохранится под именем «Без названия». Сохранения всегда можно вывести на экран двойным щелчком мыши и отредактировать в случае возникновения подобной необходимости.

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

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

Откроется план мира, с которым пользователь будет работать. Размер меняется колесиком мыши, либо плюсом и минусом на шкале масштаба. Для перемещения зажмите левую клавишу мыши.

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

В этом же окне, с левой стороны, можно дать имя карте и краткое описание. Это необязательно, но сильно упростит процесс работы в будущем, когда вы создадите больше двух Яндекс.Карт.

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

Читайте также:  Простые исправления невидимости Микротикс в Winbox: советы по устранению неполадок

В поисковую строку вводим адрес фирмы. В нашем примере, вводим адрес «Улица Ляпидевского 22, корпус 1». Нажимаем «Найти», если ниже выскакивает дополнительное окно с тем же адресом, кликаем по нему.

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

Иконки редактируются. Кликните по любой из них, вылетит окошко, в которое можно вписать необходимое название и описание. Здесь же меняется цвет, тип и добавляется дополнительная иконка в центре. Такие изменения позволят не запутаться, когда объектов станет слишком много.

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

Далее выделим территорию при помощи инструмента «Многоугольник». Работать с ним просто, выбираете «Многоугольники» и вокруг здания создаете границу. Щелкайте мышкой по нужным углам, линии и формы сформируются сами. Когда закончите, нажмите клавишу Enter. Программа закончит рисовать и появится меню. Описание, цвет, прозрачность – всё создаете по своему усмотрению. Ещё раз нажмите «Многоугольники», чтобы отключить этот режим.

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

Отдалите план местности. В нашем случае ближайшее метро «Речной вокзал». Жмете «Линии», и от здания с вашей меткой так же кликами рисуете предполагаемый маршрут. Опять нажмите по Enter, в появившемся меню описываете примерное время, которое потребуется на пешую прогулку, нажимаете «Готово» и снова «Линии», чтобы выйти из режима рисования.

Для добавления дополнительных адресов повторяете те же действия. Вводите адрес, добавляете метку. В дальнейшем, когда вы добавите карту на собственный интернет-ресурс, на ней будут продемонстрированы все необходимые метки.

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

В слоях имеется три пункта:

Затем кликните по кнопке «Сохранить и продолжить» в левой части экрана.

Готово, переходим в режим сохранения. Выделяете, двигая уголки, в квадрат все, что должно попасть в зону видимости вашей схемы, либо задаете этот формат в пикселях в пункте «Размер».

Далее «Вставить на сайт», затем выбор: интерактивная карта или статическая. Если хочется большей эстетичности на сайте, просто установите галочку в пункте «Растянуть по ширине» и тогда схема займет всю ширину справа налево. После кликаете по кнопке «Получить код» и в окошке рядом появляется HTML-код вашей карты, а сверху вы видите два формата – JavaScript и iFrame.

У iFrame есть ограничения:

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

Выделяете весь код и копируете его, кликнув по выделенному правой кнопкой мыши и нажав в выпавшем меню пункт «Копировать».

На любой интернет-ресурс вставить код можно в режиме редактирования. Главное, чтобы был подходящий размер карты, иначе на странице появится просто ссылка, причем никуда не ведущая. В конструкторах или визуальных редакторах перейдите в режим HTML и вставляйте код. Вот так выглядит код в редакторе.

Показываем, как добавить карту на WordPress. Открываете свой сайт, выбираете страницу Контакты, редактировать страницу. Выбираете плюсик на черном квадрате, во всплывающем окне кликаете «Посмотреть всё».

Слева появится огромный перечень всех функций WordPress, чтобы долго не листать, вписываете в строку поиска HTML и кликаете по custom HTML.

В строку «Пишите HTML…» вставляете скопированный код. Жмете в том же блоке на предварительный просмотр. И вот она, созданная схема со всеми метками, которую можно увеличивать и перемещать.

Теперь расскажем, что потребуется для добавления вашего заведения в Яндекс.Справочник. Данная возможность бесплатна. При публикации организация будет отображена на общей карте. Чем полнее вы заполните сведения о ней, тем больше будут знать о вас клиенты.

Прочитайте правила заполнения полей. Затем на странице новая организация введите данные компании.

Организации с фактическим адресом, добавляют следующим образом:

Обратите внимание! В Яндекс.Справочнике не публикуют:

  • Адреса недвижимости, сдаваемой в аренду (квартиры, офисы, частные дома)
  • Интернет-магазины без фактического адреса или расположенные по адресу проживания владельца. Их отмечают как онлайн-организации.
Читайте также:  Редирект раскрыт: все, что вам нужно знать о его значении и влиянии

Алгоритм действий для организаций без фактического адреса, работающих онлайн:

Обратите внимание! Организации без фактического адреса размещаются только в поиске Яндекса. На Яндекс.Картах онлайн-организации не размещаются.

Впишите контактную информацию и подтвердите регистрацию. На указанный контактный телефон позвонит модератор и сообщит код. Введите его в поле «Подтвердите регистрацию».

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

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

Зайдите на страницу «Мои организации», в ней кликните по ссылке в названии компании. Перейдите во вкладку «Об организации», а оттуда в раздел «Статистика». Учитывается информация за последние 30 дней.

Основные показатели:

  • Запросы по рубрикам – сервисы Яндекса привязывают запросы в поиске к рубрикам. Например, запрос «куда сходить» будет привязан к рубрикам «Театр», «Кафе» и «Развлекательный центр». Учитываются запросы пользователей, находящих в ближайших 5 километрах от вашего заведения.
  • Конкуренты – организации, отметившие те же рубрики и находящиеся в пределах 5 километров от вас.
  • Прямые переходы – пользователь искал конкретно ваше заведение и в результате открыл на карте страницу с данными.
  • Дискавери-переходы – пользователь искал на схеме другое место, но зашел посмотреть ваши данные.

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

Для тех, кто не любит разбираться в коде, существуют виджеты для веб-ресурсов. Например, Oi Yandex.Maps for WordPress или Yandex Maps API.

Все подобные виджеты работают по одному принципу. Активируете плагин, появляется кнопка «Яндекс карта», жмете на нее и вписываете адрес. Виджет открывает карту, с которой вы работаете так же, как и с интерактивной.

Плагины позволяют без лишних движений создавать метки и вставлять необходимые описания.

Дайте знать, что вы думаете по данной теме материала в комментариях. За комментарии, подписки, лайки, отклики, дизлайки огромное вам спасибо!

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

Плагины яндекс.карт

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

Например:

  • Для 1С Битрикс: «Ваша сеть офисов на карте» и «Яндекс.Карта объектов инфоблока»;
  • Для Drupal: «Geofield Yandex Maps»;
  • Для WordPress: «Yandex Maps API»;
  • Для Joomla!: «Яндекс.Карты для Joomla» и другие.

Полный список плагинов вы можете посмотреть в Справке Яндекса.

Как видите, сделать и встроить карту Яндекс на сайт не так и сложно, и с базовым знанием HTML это вполне можно сделать самостоятельно.

Позаботьтесь о своих клиентах и помогите им быстрее найти ваш магазин, ресторан, салон красоты или офис. Создайте карту и разместите ее у себя на сайте.

Поиск объекта на карте

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

Используйте встроенные инструменты для подготовки карты:

  • измените масштаб
  • добавьте в описание название компании и контактную информацию*
  • измените цвет и тип маркера при необходимости

После внесения изменений, нажмите кнопку «Готово»

*Для того, чтобы контактная информация во всплывающей подсказке на карте была размещена построчно, используйте в конце каждой строки (кроме последней) код для переноса строки — <br />

Создайте новую карту

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

Яндекс.карта с несколькими адресами

Давайте попробуем создать карту для того случая, если у вас два магазина или два офиса в одном районе.

Точно так же создаем новую карту, называем и пишем описание. Затем выбираем инструмент «Метки». Ставим метку в нужном месте и настраиваем.

Это будет указание на первый офис (магазин, салон, филиал). Теперь нужно указать еще и второй. Все делаем точно так же, только я выбираю другой цвет для этой метки – чтобы различать. Пусть будет зеленая.

Все, карта готова. Можно сохранять и вставлять на сайт. Даже если вы не можете по какой-то причине это сделать сейчас, вы всегда найдете готовые карты в списке карт:

Оцените статью
Хостинги