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

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

  • автор:

Конструктор карт Яндекс: как сделать карту и вставить на сайт

News image

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

Любой владелец организации может зарегистрироваться в Яндекс.Справочнике и указать на Яндекс.Карте место расположения своей компании или офиса.

Конструктор карт Яндекс — сервис с помощью которого можно сделать схему проезда или список магазинов для встраивания на свой сайт.

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

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

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

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

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

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

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

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

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

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

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

  1. Создать карту в конструкторе;
  2. Получить код карты;
  3. Вставить код на сайт (он подходит для сайтов на любой CMS).

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Точно так же создаем новую карту, называем и пишем описание.

Затем выбираем инструмент «Метки». Ставим метку в нужном месте и настраиваем.

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

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

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

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

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

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

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

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

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

Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты».

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

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

Затем находим там нашу страницу «Контакты» и выбираем «Изменить».

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

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

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

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

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

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

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

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

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

Например:

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

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

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

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

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

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

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

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

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

Обновлено: 2023-06-02 20:08:02 НЧ Наталья Черникова автор материала

Зачем указывать свою организацию на карте

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

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

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

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

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

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

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

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

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

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

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

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

Конструктор карт Яндекса – еще один способ создать интерактивную карту

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

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

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

Как создать карту

Чтобы создать интерактивную карту, зайдите в конструктор (понадобится яндекс-почта), кликните на надпись «Создать карту» и добавьте объекты: метки, линии и многоугольники. Есть возможности кастомизации: меняйте тип и цвет объектов или дайте им название.

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

В конструктор можно добавить объекты из файлов KML, GPX, GeoJSON, CSV, XLSX. И наоборот, если вы поставили нужные точки в конструкторе, можно экспортировать их для использование в других программах.

Публикуем карту на сайте

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

  • Интерактивная карта – пользователи могут взаимодействовать с элементами карты: передвигать ее, менять масштаб, кликать на объекты и читать их описание.
  • Статическая карта – картинка в формате PNG для вашего сайта.
  • Печатная карта – выводит изображение в высоком разрешении для печати.

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

Еще больше информации – в справке по конструктору от Яндекса.

Материал подготовила Юлия Федорова

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

Конструктор карт Яндекс: как сделать карту и вставить на сайт

Конструктор карт Яндекс: как сделать карту и вставить на сайт

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

Реклама: Реклама. Erid 2VtzqwsYycM

Реклама. Erid 2VtzqwsYycM

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

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

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

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

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

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

  • Создать карту в конструкторе;
  • Получить код карты;
  • Вставить код на сайт (он подходит для сайтов на любой CMS).

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

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

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

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

Конструктор карт

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

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

Создаём новую карту

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

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

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

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

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

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

Схема проезда на сайт

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

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

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

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

Тип карты: интерактивная и статичная

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

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

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

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

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

Добавляем офисы и филиалы

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

Список карт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *