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

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

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

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

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

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

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

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

Пример 1

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

 

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

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

пробки Яндекс.Карты

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

Слои:

слои Яндекс.Карты

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

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

кнопки навигации Яндекс.Карт

Рис.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 Карт. (кликабельно)


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

маршруты на Яндекс.Карте

Рис.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-маркетингу и не только

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

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

Нажимая на кнопку Подписаться, я даю согласие на обработку персональных данных

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

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

Еще статьи по теме
Продвижение сайта официального дилера KIA

8 Декабря 2017

Продвижение сайта официального дилера KIA

Увеличение органического трафика сайта в 2,3 раза.

Читать далее...
ARTOX media выступит на конференции CyberSERMday 2017

5 Декабря 2017

ARTOX media выступит на конференции CyberSERMday 2017

Влияние репутации на бизнес-показатели компании

Читать далее...
Почему нельзя пропустить Национальный рекламный форум'17?

19 Октября 2017

Почему нельзя пропустить Национальный рекламный форум'17?

ARTOX media – медиапартнер и спикер ключевого digital-события страны

Читать далее...
Контекстная реклама капсульного отеля в Москве

9 Октября 2017

Контекстная реклама капсульного отеля в Москве

Количество бронирований с сайта увеличилось на 22% в месяц

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

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

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

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

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