Ставим на сайт карту Яндекса

Здравствуйте, уважаемые читатели!

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

a10-10

Чаще всего необходимость в карте возникает на сайте каких-либо фирм, когда потенциальному клиенту надо показать путь до офиса или склада кампании. Начальной точкой на маршруте надо указывать всем известное место, которое большинство людей и так знает как найти.

a8-8

Для пешеходов указывается ближайшее метро. Тем, кто передвигается на автомобиле, удобнее указать ближайший съезд с кольцевой (я пишу для Питера, в других городах может быть что-то другое).

Технически же это делается следующим образом. Переходим на Яндекс и идем в раздел «Все сервисы». Идем именно туда, а не на Яндекс карты, это важно. Там находим кнопку «Технологии», переходим по ней. Оказываемся вот в таком интересном месте.

a1-1

Справа будет здоровенная кнопка «API Карт», жмем по ней. В новой странице справа внизу будет «Конструктор карт». Он нам и нужен, переходим на него. В новом окне жмем на «Создать новую карту».

a2-2

Открывается вот такая панорама.

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

Допустим, мне нужно указать путь от Ломоносова до Лисьего Носа через Кронштадт.

a4-4

Сначала нажимаем кнопку «Линии». В активном состоянии она подсвечивается. Потом подводим курсор к началу маршрута и щелкаем ЛКМ (левой кнопкой мыши). На карте появляется точка. Теперь, отпустив кнопку мыши, ведем курсор по маршруту.

Если нам надо отметить какую-то точку, то снова щелкаем ЛКМ. Ведем курсор дальше, и так до конечной точки. Потом еще раз щелкаем по конечной точке и в выпадающем меню выбраем «Завершить». У нас выскакивает вот такое окно. 

a5-5

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

Теперь на маршруте можно выставить метки. Обычно это какие-либо ориентиры. Жмем кнопку «Метки», она подсвечивается. Теперь на маршруте щелкаем ЛКМ по нужному месту, открывается такое окошко.

a6-6

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

a7-7

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

Теперь переходим в «Записи» — «Добавить запись». Я пишу статьи сразу здесь, но кто-то делает это предварительно в ворде, а потом вставляет. Это без разницы. Статьи пишутся в режиме «Визуально», а нам надо переключиться в режим «Текст». Делаем это (кнопка вверху справа) и в нужное место статьи вставляем скопированный код. В этом месте после публикации появится сделанная нами карта.

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

С уважением, Владислав Заболотный.

Поделитесь статьей в соцсетях.

Комментарии (8) на “Ставим на сайт карту Яндекса”

  • Интересная инструкция! Пригодится для бизнесменов, интернет-магазинов и одностраничников с физическим товаром. Для блога, на мой взгляд, такая карта — мусор…

    • Владислав Заболотный:

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

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

    • Владислав Заболотный:

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

  • Черноморец Светлана:

    Владислав, мне понравился Ваш сайт.Шрифт на Вашем сайте тоже отличный, хорошо читается, приятно для глаз. На страничках Вашего сайта я нашла много интересного контента. Теперь буду заходить чаще. Успехов Вам в Вашем блогерстве.

    • Владислав Заболотный:

      Спасибо за добрые пожелания. Я тоже к Вам заглядываю в гости.

Оставить комментарий

Свежие комментарии
Хотите зарабатывать?