Яндекс карта для сайта: создаем и вставляем с помощью конструктора карт и API библиотек

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

Яндекс карта для сайта: создаем и вставляем с помощью конструктора карт и API библиотек

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

  • Раздел контакты с полными данными компании;
  • Форма обратной связи на сайт в виде чата;
  • Четкая структура сайта (особенно если это интернет магазин или каталог);
  • Красивый и удобный дизайн;
  • Адаптивная мобильная версия сайта;
  • Простота и легкость кода.

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

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

Яндекс карта для сайта с помощью API

 

 

Помимо получения просто кода для вставки интерактивной схемы на страницы своего сайта вы также можете использовать для различных целей API сервисы. Давайте расскажу, что нам предлагает Yandex.

Что такое API?

API – это программный интерфейс предоставляющий библиотеки классов и функций которые мы можем использовать в виде стороннего приложения. Одним словом нам дают инструменты, которые мы уже немного подгоняем и настраиваем под себя.

Если мы перейдем в раздел Яндекса по адресу: https://tech.yandex.ru/maps/?from=bno, то нам предложат воспользоваться рядом продуктов для своих проектов, о которых поговорим далее.

  • Геокодер – это API элемент карт, который позволяет при нажатии на любой адрес и место на карте России с последующим получением gps данных этого места. Тем самым мы можем переводить географические координаты в точные адреса нужных нам мест.
  • Statiс API – это раздел позволяющий получить статическую схему, которая будет загружаться очень быстро даже если связь с интернетом будет очень низкая. Тут очень интересным является то, что вы берете просто кусок карты с нужным масштабом и указываете на ней автомобильные пробки или различные элементы, которые при каждом новом отображении на сайте будет автоматически обновлять актуальную информацию без дополнительных вмешательств в код. Имеется бесплатная и платная версия продукта.
  • JavaScript API – это библиотека позволяющая работа и создавать схемы на местности в браузерах, а также использовать в приложениях на Адройде при создании окон. Один самых интересных элементов является возможности вставки своих панорам на сайт, а также устроить поиск по организациям. В качестве панорамы можно вставлять любое изображение или использовать координаты карты для указания местности.
  • API бизнес – это программное расширение, которое помогает настроить возможность отслеживания по геолокации транспорта, а также вести диспетчеризацию транспорта компании и прочие виды. Есть платная и бесплатная версии. Также можно использовать запросы по местоположению координат нужного объекта.
  • Поиск по организациям – этот раздел подойдет для размещения как раз на своем проекте. Очень интересен если у вас каталог организаций и подобного рода проекты. Для поиска используется Яндекс.Справочник и для реализации поиска на сайте необходимо будет пополнять и обновлять базу организаций своими руками.
  • YMapsML – это раздел API Яндекса в котором мы можем любую планировку передавать посредством текстового документа. Не знаю, зачем это, но это предусмотрено в сервисе поисковика. Работает все на Javascript.

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

Конструктор карт яндекс для сайта

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

Лично я предпочитаю просто получить код и вставить его на сайт. Итак, давайте покажу, как это сделать очень быстро.

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

Яндекс карта для сайта: создаем и вставляем с помощью конструктора карт и API библиотек

После загрузки сервиса, нам необходимо придумать название схемы, которую мы будем создавать и нажимаем «создать новую».

nazvanie

Далее нам предстоит просто выбрать интересующий нас адрес. Я выберу офисное здание в г.Казани по адресу: г.Казань, ул. Татарстан, д.20. Вводим в строку поиска адрес, как показано на скриншоте.

mesta karta

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

Выбираем тип из списка:

  • Печатная схема – этот тип файл больше подойдет для последующей распечатки на рабочем компьютера и имеет более компактный вид. Я его не использую если честно.
  • Статическая – данный тип карты выходит в виде картинки формата .png. Разместить сможем ограниченное число объектов на местности.
  • Интерактивная карта – это самый оптимальный вариант вставки кода на свой сайт. На сайте в разделе «контакты» пользователь сможет просто работать со схемой на местности и менять масштаб на местности как ему удобно для разъяснения маршрута.

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

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

kvadrat

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

linii karta

Метки – это полезная вкладка, которая создает кнопку на местности или на здании при нажатии, на которую будет появляться ее описание. Дизайн выбираем сами.

metki karta yandex

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

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

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

kom karti gotoviy

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

Вот так она будет выглядеть в качестве примера урока:

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

Может Вам будет интересно почитать:

С уважением, Галиулин Руслан.

Рейтинг
( Пока оценок нет )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
FIRELINKS.RU
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: