Как создать Яндекс.Карту для своего сайта
Итак, вы создали сайт, наполнили его необходимой и полезной информацией. Теперь осталось указать адрес на карте.
Для этого можно использовать Яндекс.Карты – картографический сервис, на котором можно отметить местоположение заведения, загрузить фотографии, кратко описать все необходимые данные, проложить маршрут.
Вставить карту на сайт можно несколькими способами:
- Поработать в конструкторе от Яндекс.Карт и интегрировать код, получив полноценный план местности для собственного интернет-ресурса.
- Использовать виджеты
Зачем указывать свою организацию на карте
Каждому владельцу сайта стоит указать свою метку на Яндекс.Картах. Это связано с тем, что:
- Людям значительно проще сделать заказ, когда им облегчают жизнь. Они сразу знают куда идти, и не приходится искать дополнительные сведения.
- Клиенты могут случайно зацепиться взглядом за название вашей компании и запомнить его на будущее, пока просматривают территорию в поисках совершенно другого места.
- Не стоит забывать о психологическом факторе: если указаны полные сведения в контактах, да еще и отмечено местоположение, значит этой фирме нечего скрывать.
Пользоваться этим сервисом клиентам легко и, что самое главное - удобно. Особенно, если вы добавите на свой сайт интерактивный план местности. Такую живую проекцию можно перемещать. Менять на ней способ отображения, например, выбрать схему или снимок со спутника. Масштабировать, видеть на ней отзывы и сообщения других людей.
Кроме того, по сравнению со статичной картинкой, на которой видно только местоположение, с помощью интерактивной карты:
- Не приходится уходить с сайта в поисках дополнительной информации;
- Легко проложить наиболее удобный маршрут;
- Можно подсчитать время, которое потребуется на поездку;
- Можно увидеть актуальную информацию о пробках и авариях;
- Яндекс оперативно обновляет информацию о произошедших изменениях пути, будь - то новое здание или строительство.
Проще говоря, у сервиса множество преимуществ. Его использование также не станет проблемой. О том, как добавить Яндекс карту на сайт, читайте далее.
Как создать карту Яндекс для сайта в конструкторе?
Сперва проверьте, зарегистрирован ли аккаунт на платформе Яндекс. Если нет, придётся его завести. Ничего сложного, вы просто создадите себе электронный почтовый ящик от Яндекса. Если он у вас уже есть, этот этап можно пропустить.
Далее идем в конструктор.
Открываем конструктор Яндекс.Карт. Перед пользователем появляется окно навигации. Снизу идет перечень созданных ранее карт, который запомнил Яндекс, (созданных с текущего аккаунта). Здесь указана дата и время сохранения, а также название карты. Если пользователь никак не назовет новый файл, по умолчанию он сохранится под именем «Без названия». Сохранения всегда можно вывести на экран двойным щелчком мыши и отредактировать в случае возникновения подобной необходимости.
Выбираем один из созданных ранее файлов. Открывается схема с ранее отмеченным местом. Если работа с этим файлом закончена или кликнули по нему по ошибке, всегда можно вернуться к предыдущему окну, нажав на «Список карт» в верхнем правом углу.
Как сделать метку, линию и т.д. на карте Яндекс?
Перейдем непосредственно к созданию нового места. Для начала работы нажмите «Создать карту».
Откроется план мира, с которым пользователь будет работать. Размер меняется колесиком мыши, либо плюсом и минусом на шкале масштаба. Для перемещения зажмите левую клавишу мыши.
В верхней части находится строка поиска, куда вводится адрес или название объекта. Чуть ниже инструменты, которые помогут при редактировании:
- Метки – обозначают местоположение офиса;
- Линии – прокладывают маршрут к заданному месту;
- Многоугольники – отмечают целые территории;
- Пробки – при выборе этой кнопки информация о пробках будет демонстрироваться автоматически.
- Слои – при настройке этого параметра клиент увидит схематичный план или получит фото со спутника.
В этом же окне, с левой стороны, можно дать имя карте и краткое описание. Это необязательно, но сильно упростит процесс работы в будущем, когда вы создадите больше двух Яндекс.Карт.
Здесь же находится «Список объектов», в который будут вноситься все ваши действия. При необходимости через этот список легко вернуться к каждому пункту и отредактировать данные.
В поисковую строку вводим адрес фирмы. В нашем примере, вводим адрес «Улица Ляпидевского 22, корпус 1». Нажимаем «Найти», если ниже выскакивает дополнительное окно с тем же адресом, кликаем по нему.
Теперь вы видите, что на схеме появилась метка на нужном здании. При необходимости увеличиваем масштаб до соответствующего размера.
Иконки редактируются. Кликните по любой из них, вылетит окошко, в которое можно вписать необходимое название и описание. Здесь же меняется цвет, тип и добавляется дополнительная иконка в центре. Такие изменения позволят не запутаться, когда объектов станет слишком много.
Если случайно создали множество меток, их проще удалять через список с левой стороны. Кликайте по лишним меткам, над ними будет всплывать окошко, выбираете удалить, и все будет готово.
Далее выделим территорию при помощи инструмента «Многоугольник». Работать с ним просто, выбираете «Многоугольники» и вокруг здания создаете границу. Щелкайте мышкой по нужным углам, линии и формы сформируются сами. Когда закончите, нажмите клавишу Enter. Программа закончит рисовать и появится меню. Описание, цвет, прозрачность – всё создаете по своему усмотрению. Ещё раз нажмите «Многоугольники», чтобы отключить этот режим.
И теперь создадим еще схему для тех, кто пойдёт пешком. Выбираете ближайшую транспортную точку: метро или автобусную остановку, или и то и другое сразу.
Отдалите план местности. В нашем случае ближайшее метро «Речной вокзал». Жмете «Линии», и от здания с вашей меткой так же кликами рисуете предполагаемый маршрут. Опять нажмите по Enter, в появившемся меню описываете примерное время, которое потребуется на пешую прогулку, нажимаете «Готово» и снова «Линии», чтобы выйти из режима рисования.
Как добавить дополнительные адреса
Для добавления дополнительных адресов повторяете те же действия. Вводите адрес, добавляете метку. В дальнейшем, когда вы добавите карту на собственный интернет-ресурс, на ней будут продемонстрированы все необходимые метки.
С рисованием покончено, осталось настроить слои. Выбирайте по своему усмотрению.
В слоях имеется три пункта:
- Схема – это квадратные схематичные здания и примерные дороги. Всё подписано;
- Спутник – фотография из космоса. Вид настоящих домов с деревьями и машинами, но ничего не подписано и сориентироваться довольно трудно;
- Гибрид – те же фото со спутника, только с подписями и подрисованными дорогами из схемы. Наиболее удобный вариант для считывания, но чаще всего предпочтительнее вариант «Схема»
Затем кликните по кнопке «Сохранить и продолжить» в левой части экрана.
Готово, переходим в режим сохранения. Выделяете, двигая уголки, в квадрат все, что должно попасть в зону видимости вашей схемы, либо задаете этот формат в пикселях в пункте «Размер».
Далее «Вставить на сайт», затем выбор: интерактивная карта или статическая. Если хочется большей эстетичности на сайте, просто установите галочку в пункте «Растянуть по ширине» и тогда схема займет всю ширину справа налево. После кликаете по кнопке «Получить код» и в окошке рядом появляется HTML-код вашей карты, а сверху вы видите два формата – JavaScript и iFrame.
У iFrame есть ограничения:
- Карты отображаются только в слое «Схема»
- Только крупный масштаб отображения
- Работают не все теги HTML-кода
JavaScript на изначально заданных настройках не имеет поиска, на ней нельзя проложить маршрут и не отображается режим панорамы. Всё это можно дополнительно настроить, зарегистрировав API-ключ в кабинете разработчика. Пункт под кодом «Добавить поиск и маршруты на карту» ведет в тот же кабинет.
Выделяете весь код и копируете его, кликнув по выделенному правой кнопкой мыши и нажав в выпавшем меню пункт «Копировать».
Добавление на сайт
На любой интернет-ресурс вставить код можно в режиме редактирования. Главное, чтобы был подходящий размер карты, иначе на странице появится просто ссылка, причем никуда не ведущая. В конструкторах или визуальных редакторах перейдите в режим HTML и вставляйте код. Вот так выглядит код в редакторе.
Показываем, как добавить карту на WordPress. Открываете свой сайт, выбираете страницу Контакты, редактировать страницу. Выбираете плюсик на черном квадрате, во всплывающем окне кликаете «Посмотреть всё».
Слева появится огромный перечень всех функций WordPress, чтобы долго не листать, вписываете в строку поиска HTML и кликаете по custom HTML.
В строку «Пишите HTML…» вставляете скопированный код. Жмете в том же блоке на предварительный просмотр. И вот она, созданная схема со всеми метками, которую можно увеличивать и перемещать.
Как добавить компанию в Яндекс.Справочник
Теперь расскажем, что потребуется для добавления вашего заведения в Яндекс.Справочник. Данная возможность бесплатна. При публикации организация будет отображена на общей карте. Чем полнее вы заполните сведения о ней, тем больше будут знать о вас клиенты.
Шаг 1
Прочитайте правила заполнения полей. Затем на странице новая организация введите данные компании.
Организации с фактическим адресом, добавляют следующим образом:
- «Название» и «Вид деятельности» – выберите из списка
- В пункте «У вас есть офис для клиентов?» отметьте «Да, есть филиал, магазин, офис»
- Теперь впишите адрес своего заведения или самостоятельно выберите на карте расположение.
Обратите внимание! В Яндекс.Справочнике не публикуют:
- Адреса недвижимости, сдаваемой в аренду (квартиры, офисы, частные дома)
- Интернет-магазины без фактического адреса или расположенные по адресу проживания владельца. Их отмечают как онлайн-организации.
Алгоритм действий для организаций без фактического адреса, работающих онлайн:
- «Название» и «Вид деятельности» – выберите из списка
- В пункте «У вас есть офис для клиентов?» отметьте пункт «Нет, у меня онлайн-компания»
- Территория оказания услуг – выбираете подходящие регионы. При выборе региона «Россия» система автоматически ставит метку в центр страны – Красноярский край, Эвенкийский район. Не беспокойтесь, ваша организация будет на том месте, где вы отметили её изначально.
Обратите внимание! Организации без фактического адреса размещаются только в поиске Яндекса. На Яндекс.Картах онлайн-организации не размещаются.
Шаг 2
Впишите контактную информацию и подтвердите регистрацию. На указанный контактный телефон позвонит модератор и сообщит код. Введите его в поле «Подтвердите регистрацию».
После этого данные уходят на модерацию. Будьте готовы, к тому, что проверка может затянуться на две недели. Если статус вашей заявки не меняется более двух недель, обратитесь в службу поддержки.
Шаг 3
После удачного прохождения модерации максимально полно заполняйте все поля информации о вашей организации.
Как смотреть статистику
Зайдите на страницу «Мои организации», в ней кликните по ссылке в названии компании. Перейдите во вкладку «Об организации», а оттуда в раздел «Статистика». Учитывается информация за последние 30 дней.
Основные показатели:
- Запросы по рубрикам – сервисы Яндекса привязывают запросы в поиске к рубрикам. Например, запрос «куда сходить» будет привязан к рубрикам «Театр», «Кафе» и «Развлекательный центр». Учитываются запросы пользователей, находящих в ближайших 5 километрах от вашего заведения.
- Конкуренты – организации, отметившие те же рубрики и находящиеся в пределах 5 километров от вас.
- Прямые переходы – пользователь искал конкретно ваше заведение и в результате открыл на карте страницу с данными.
- Дискавери-переходы – пользователь искал на схеме другое место, но зашел посмотреть ваши данные.
Использование виджета
Раньше установка плагинов упрощала жизнь. Сейчас они не пользуются спросом, потому что создать схему и вставить ее на сайт можно буквально в несколько кликов.
Для тех, кто не любит разбираться в коде, существуют виджеты для веб-ресурсов. Например, Oi Yandex.Maps for WordPress или Yandex Maps API.
Все подобные виджеты работают по одному принципу. Активируете плагин, появляется кнопка «Яндекс карта», жмете на нее и вписываете адрес. Виджет открывает карту, с которой вы работаете так же, как и с интерактивной.
Плагины позволяют без лишних движений создавать метки и вставлять необходимые описания.