Добавление карты на свой сайт или интернет магазин, является если не обязательным, то очень желательным действием, с точки зрения поискового продвижения и повышения юзабилити. Ведь согласитесь, когда пользователь знает, как вас найти, это повышает как уровень доверия к сайту, так и общий уровень удобства использования вашего ресурса.
В любом случае, добавление Яндекс карт на сайт, считается хорошим тоном. Сейчас мы разберемся, как сделать это.
Оглавление:
- Регистрация на Яндекс
- Создание и настройка карты
- Добавляем Яндекс карту на сайт
- Заключение
- Наши рекомендации
- Стоит почитать
Регистрация на Яндекс
Поскольку мы будем использовать в работе сервис, предложенный компанией Яндекс, нам необходимо иметь учетную запись. Если вы еще не завели ее, переходите на главную страницу yandex.ru. Здесь нас интересует блок "Почта - завести ящик".
Если у вас есть учетная запись - вводите логин и пароль, затем входите на сервис. Если нет - щелкайте кнопку "Завести ящик", и пройдите простую процедуру регистрации.
После того, как вы авторизовались на Яндекс, переходите к следующему шагу.
Создание и настройка карты
Теперь нам нужно перейти в раздел Яндекс-Карты. Вы найдете его по ссылке:
https://tech.yandex.ru/maps/tools/constructor/
Переходите туда, и вы увидите главное окно конструктора карт.
Давайте для примера, создадим простую карту. На ней мы отметим месторасположение нашего вымышленного офиса. Допустим, мы живем в Нижнем Новгороде, и работаем по адресу "ул. Костина д.3".
Во первых, Яндекс сразу после запуска сервиса определит ваше место расположение, и откроет карту нужного города. Вам останется только отметить на карте нужную точку. Для этого в блоке "Найти место на карте", мы пишем наш адрес, и щелкаем кнопку "Найти".
Откроется выпадающий список - в нем будут все места, подходящие под наш запрос. Выбираем нужный, щелкая по нему курсором мыши. Адрес будет найден, и мы перейдем к окну создания отметки.
Здесь мы вводим описание для выбранной точки. При необходимости вы можете выбрать цвет отметки, и указать для нее номер (если точек будет несколько). После этого можно создавать Яндекс карту. В блоке "Название карты" введите желаемое имя, и щелкните кнопку "Сохранить и получить код"
Вы перейдете к завершающему шагу.
Здесь вы увидите готовую карту. Прежде всего, нам нужны два пункта "Статическая" и "Интерактивная". Это два вида карты. Если вы выберите статическую, то добавить на сайт вы сможете простую фотографию карту. В случае с интерактивной, будут доступны визуальные эффекты - вы сможете менять размер и передвигаться по карте. Выбирайте нужный вариант, щелкайте соответствующую кнопку, и копируйте предложенный код. Он понадобится нам для подключения Яндекс карты на свой сайт.
При необходимости мы можем отредактировать карту, и добавить дополнительные параметры. Для этого в правом блоке меню есть соответствующие кнопки.
Добавляем Яндекс карту на сайт
После того, как мы получили нужный код, можно переходить к его добавлению на наш сайт. Для этого вам нужно определит, на какой странице вы хотите опубликовать карту. Теперь вам нужно перейти в режим ее редактирования.
Если вы используйте CMS (систему управления контентом), то перейдите к списку опубликованных страниц, и откройте режим редактирования для нужной.
Если же все страницы вашего сайта созданы вручную, зайдите на свой хостинг, и откройте нужную в режиме редактирования. В любом случае, вы должны получить возможность добавить код на страницу.
Теперь перейдите к тому месту на странице, где должна быть карта, и вставьте код, полученный на предыдущем шаге. В нашем примере мы добавили статическую карту:
Нам удалось сделать это, вставкой вот такого кода:
<img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?sid=AtS9rjVRN516G11uG4y7kB1we7GmxCa9&width=600&height=450" alt="Добавляем на свой сайт сервис Яндекс Карты. Помогаем клиентам найти нас"/>
Видео к статье:
Заключение
Если вы хотите сделать свой проект еще более удобным для посетителей, не поленитесь и добавьте Яндекс карту с отметкой о своем офисе. Это сильно повысит доверие пользователей, и поможет им найти вас, в случае необходимости.
А для проектов, которые занимаются коммерческой деятельностью и продажей, это необходимо делать в обязательном порядке.
Наши рекомендации
Видеоредактор онлайн бесплатно без скачивания.
Таймер обратного отсчета онлайн со звуком.
Неизвестная сетевая ошибка при скачивании файла.
Стоит почитать
Зачем искать информацию на других сайтах, если все собрано у нас?