Inet and work Интернет и работа

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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