или закажите обратный звонок
  1. Главная
  2. База знаний
  3. Создание собственной Яндекс.Карты на сайте
SEO

Создание собственной Яндекс.Карты на сайте

API Яндекс.Карт поможет создать уникальную интерактивную карту. Делимся примерами.

28 Ноября 2016 | 4087 | 0

Карта на сайте служит проводником между вами и вашими клиентами/пользователями.

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

В данной статье рассмотрим 3 примера карт и научимся их создавать.

Хотелось бы начать с того, что существует два типа карт: статические (представлены в виде изображения) и интерактивные. Об интерактивных картах и поговорим.

Для создания интерактивных карт используется Яндекс API – программный интерфейс, с помощью которого можно установить Яндекс.Карты и необходимый инструментарий для работы с ними в своем веб-приложении или на сайте.

Инструментов Яндекс API довольно много. Ознакомиться с ними можно на странице API карт. Забегая немного вперед хочется отметить, что при создании собственных карт использовались только JavaScript API и Геокодер.

Пример 1

Первый и, наверно, самый простой пример. Когда на карте вместо стандартной метки Яндекс.Карт хотелось бы разместить логотип компании. (кликабельно)

 

На данной карте метка объекта была изменена на логотип компании. При наведении на логотип можно отображать необходимую нам информацию

Добавлен функционал Яндекс.Пробки:

Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru - Изображение №1

Рис.1 – Яндекс.Пробки

Слои:

Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru - Изображение №2

Рис.2 – Слои на Яндекс.Карте с помощью API Карт

Указание и поиск необходимого адреса, геопозиционирование и масштабирование:

Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru - Изображение №3

Рис.3 – Вспомогательные кнопки на Яндекс.Карте с помощью API Карт

Карта состоит из html-кода, который нам нужен для вставки карты на сайт. Ну и собственно подключаемый JS-файл, который содержит запрограммированную нами информацию.

В рассматриваемом примере html-код для вставки на сайт:


<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла

ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 16 }),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'ARTOX media ул.Ленинская Слобода 26, стр. 5' }, {
// Опции. Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'http://seo.artox-media.ru/local/img/logo.png',
// Размеры метки.
iconImageSize: [161, 25],
// Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки).
iconImageOffset: [-60, -15] });
myMap.geoObjects.add(myPlacemark); });

Пример 2

26 октября 2016 года вышло обновление Яндекс API, в котором были добавлены некоторые полезные возможности:

  • Подключение API при использовании CSP
  • Интерактивные маркеры POI на подложке
  • Новые балуны маршрутов
  • Управление с клавиатуры в плеере Панорам

Во втором примере хотелось бы поговорить про интерактивные маркеры POI.

Points Of Interest или POI – это маркеры на подложке карты, которые обозначают наиболее значимые или заметные объекты и помогают ориентироваться на схеме. Это могут быть как организации, так и, например, достопримечательности.

Теперь точки POI на карте стали интерактивными – при выборе откроется карточка с информацией об объекте. (кликабельно)

 

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

Как сделать такую карту для своего сайта?

HTML-код для вставки на сайт остается без изменений:


<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла

function init() {
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 18,
controls: [] });

// Создадим экземпляр элемента управления «поиск по карте» с установленной опцией провайдера данных для поиска по организациям.
var searchControl = new ymaps.control.SearchControl({
options: {
provider: 'yandex#search' }});
myMap.controls.add(searchControl);

// Программно выполним поиск определённой компании в текущей прямоугольной области карты.
searchControl.search('ARTOX media'); }
ymaps.ready(init);

Пример 3

В данном примере рассмотрим построение карты маршрутов. Часто бывает так, что пользователю нужно показать, как добраться до места от ближайшей остановки или станции метро. Конечно, можно разместить схему или изображение маршрута. Однако, это легко можно сделать с помощью Яндекс API Карт. (кликабельно)


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

Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru - Изображение №4

Рис.4 – Новые балуны маршрутов API Карт

HTML-код для вставки карты на сайт без изменений:


<script src="расположение подключаемого файла.js" type="text/javascript"> </script>
<style type="text/css">
#map {
width: 100%; height: 100%; } </style>
<div id="map"> </div>

Код JS-файла

function init () {
var multiRoute = new ymaps.multiRouter.MultiRoute({
referencePoints: [
[55.7182901653654,37.69726548703039], "Москва, ул.Ленинская Слобода 26, стр. 5"],
params: {
routingMode: 'masstransit' } }, {

// Автоматически устанавливать границы карты так, чтобы маршрут был виден целиком.
boundsAutoApply: true });

// Создаем кнопку.
var changeLayoutButton = new ymaps.control.Button({
data: { content: "Показывать время для пеших сегментов"},
options: { selectOnClick: true } });

// Объявляем обработчики для кнопки.
changeLayoutButton.events.add('select', function () {
multiRoute.options.set(
// routeMarkerIconContentLayout - чтобы показывать время для всех сегментов.
"routeWalkMarkerIconContentLayout",
ymaps.templateLayoutFactory.createClass('{{ properties.duration.text }}')); });
changeLayoutButton.events.add('deselect', function () {
multiRoute.options.unset("routeWalkMarkerIconContentLayout"); });

// Создаем карту с добавленной на нее кнопкой.
var myMap = new ymaps.Map('map', {
center: [55.71136156901162,37.65276849999999],
zoom: 16,
controls: [changeLayoutButton] }, {
buttonMaxWidth: 300 });

// Добавляем мультимаршрут на карту.
myMap.geoObjects.add(multiRoute); }
ymaps.ready(init);

Хочется добавить, что API Карт обладает огромным функционалом. Можно строить различные маршруты для различных видов транспорта без привязки к объектам (т.е. пользователь сам может задать откуда начать построение маршрута до вашей организации).

Ознакомиться с примерами можно в "Песочнице Яндекс".

Выводы

  • Старайтесь делать сайты полезные и удобные для пользователей
  • Яндекс API Карт обладает безграничным функционалом, на основе которого может быть придумано и внедрено огромное количество полезных возможностей
  • Не бойтесь познавать новое. Развивайтесь, придумывайте, внедряйте

Удобных и полезных карт вашему сайту!

Автор: Евгений Соболь,
SEO-специалист ARTOX media

ТОП статей и материалов по digital-маркетингу и не только

(0)

Комментарии

Написать сообщение …Загрузить файлы?

Делимся десятилетним опытом продвижения и web-исследованиями по отраслям в рассылке

Всего 2 раза в месяц

Наш и клиентский опыт в digital за 10 лет по отраслям

Подробности в первом письме

Больше статей
Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru- Изображение №5

11 Сентября 2018

Денис Буко в большом интервью Adindex: ORM, блокчейн-проекты и планы на будущее

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

Читать далее...
Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru- Изображение №6

14 Мая 2018

Поиск точек роста онлайн-продаж для автомобильных дилеров

Исследование, в котором вы узнаете, как полностью реализовать свой потенциал и качественно оптимизировать сайт.

Читать далее...
Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru- Изображение №7

26 Марта 2018

Как новостные и статейные площадки влияют на репутационную выдачу в поисковых системах

Мы провели исследование, в ходе которого установили, существует ли зависимость между SEO-показателями площадки и частотой ее попадания в ТОП выдачи, и составили список новостных ресурсов, к которым наиболее «благосклонны» поисковые системы.

Читать далее...
Создание собственной Яндекс.Карты на сайте - читайте в разделе Материалы на seo.artox-media.ru- Изображение №8

9 Февраля 2018

Кейс по продвижению оптового магазина светодиодной продукции

За 2 года продвижения позиции сайта оставались минимальными - ресурс ранжировался в ТОП-50 и ТОП-100. Что делать, если ваш текущий оптимизатор бессилен?

Читать далее...

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ

ОСТАВЬТЕ ЗАЯВКУ И МЫ ОБЯЗАТЕЛЬНО СВЯЖЕМСЯ С ВАМИ