Динамические Яндекс.Карты для сайта

Если у Вашей компании есть несколько филиалов или офисов, то имеет смысл сделать динамическую карту с переходами к конкретному объекту.

Для этого нам надо сделать следующее:
1. Сверстать блоки с кнопками “Показать на карте”
2. Подключить API для Яндекс.Карты
3. Добавить скрипт для инициализации карты и переход по карте
4. Результат тут

HTML блоки с информацией


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!--Подключаем библиотеку-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>
	<div class="map-blocks">
		<div class="map-block">
			<p>Офис 1</p>
			<p>Адрес: г. Минск, ул. Лазо, 16</p>
			<button class="open-map" data-coord="[53.870989, 27.660709]">Посмотреть на карте</button>
		</div>
		<div class="map-block">
			<p>Офис 2</p>
			<p>Адрес: г. Брест, ул. Лазо, 16</p>
			<button class="open-map" data-coord="[52.104232, 23.706783]">Посмотреть на карте</button>
		</div>
		<div class="map-block">
			<p>Офис 3</p>
			<p>Адрес: г. Витебск, ул. Лазо, 14</p>
			<button class="open-map" data-coord="[55.200806, 30.246976]">Посмотреть на карте</button>
		</div>
		<div class="map-block">
			<p>Офис 4</p>
			<p>Адрес: г. Гомель, ул. Лазо, 16</p>
			<button class="open-map" data-coord="[52.365623, 31.032418]">Посмотреть на карте</button>
		</div>
		<div class="map-block">
			<p>Офис 5</p>
			<p>Адрес: г. Гродно, ул. Лазо, 16</p>
			<button class="open-map" data-coord="[53.662753, 23.803882]">Посмотреть на карте</button>
		</div>
		<div class="map-block">
			<p>Офис 6</p>
			<p>Адрес: г. Могилёв, ул. Лазо, 16</p>
			<button class="open-map" data-coord="[53.926181, 30.327789]">Посмотреть на карте</button>
		</div>
	</div>
        <div id="yamap"> </div>
</body>
</html>

Атрибут data-coord равен координатам точки по Яндекс.Карте, пример:

Подключаем API Яндекс.Карт

Мы должны получить ключ API для карт.
Для этого нужно перейти по ссылке https://yandex.ru/dev/locator/keys/get/

Чтобы получить ключ нужно:

  • авторизоваться на Яндексе;
  • ознакомиться c пользовательским соглашением и принять его условия;
  • указать адрес вашего сайта в регистрационной форме на странице выше

После получения ключа перед тегом </body> добавляем наш скрипт в виде:
<script src=“https://api-maps.yandex.ru/2.1/?apikey={ваш API-ключ}&lang=ru_RU” type=“text/javascript”> </script>

Добавляем скрипт для инициализации Яндекс.Карт


<script src="https://api-maps.yandex.ru/2.1/?apikey={ваш API-ключ}&lang=ru_RU" type="text/javascript"> </script>
<script type="text/javascript">
	ymaps.ready(function () {
        // yamap - ID блока, в котором инициализируется карта
	var myMap = new ymaps.Map('yamap', {
			//Берём центр РБ
			center: [53.863852, 27.081893], 
			// Увеличение при котором видно на карте всю Беларусь
			zoom: 6 
		}, {
			searchControlProvider: 'yandex#search'
		}),
		// Создаём макет содержимого.
		 MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
			'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
		),
		 	//Добавляем маркеры офисов указывая их координаты
			myPlacemarkWithContent_1 = new ymaps.Placemark([53.870989, 27.660709], {
				//Текст при наведении на метку
				hintContent: 'Офис 1', 
				//Текст при нажатии на метку
				balloonContent: 'г. Минск, ул. Лазо, 16' 
			}, {
				// Опции.
				// Необходимо указать данный тип макета.
				iconLayout: 'default#imageWithContent',
				// Своё изображение иконки метки.
				//Метка имеет размер 150х150 - квадрат
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
				// Размеры метки.
			    iconImageSize: [50, 50],
				// Смещение левого верхнего угла иконки относительно
				// её "ножки" (точки привязки).
				iconImageOffset: [-25, -50],
				// Смещение слоя с содержимым относительно слоя с картинкой.
				iconContentOffset: [15, 15],
				// Макет содержимого.
				iconContentLayout: MyIconContentLayout
			});
			myPlacemarkWithContent_2 = new ymaps.Placemark([52.104232, 23.706783], {
				hintContent: 'Офис 2', 
				balloonContent: 'г. Брест, ул. Лазо, 16' 
			}, {
				iconLayout: 'default#imageWithContent',
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
			    iconImageSize: [50, 50],
				iconImageOffset: [-25, -50],
				iconContentOffset: [15, 15],
				iconContentLayout: MyIconContentLayout
			});
			myPlacemarkWithContent_3 = new ymaps.Placemark([55.200806, 30.246976], {
				hintContent: 'Офис 3', 
				balloonContent: 'г. Витебск, ул. Лазо, 14' 
			}, {
				iconLayout: 'default#imageWithContent',
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
			    iconImageSize: [50, 50],
				iconImageOffset: [-25, -50],
				iconContentOffset: [15, 15],
				iconContentLayout: MyIconContentLayout
			});
			myPlacemarkWithContent_4 = new ymaps.Placemark([52.365623, 31.032418], {
				hintContent: 'Офис 4', 
				balloonContent: 'г. Гомель, ул. Лазо, 16' 
			}, {
				iconLayout: 'default#imageWithContent',
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
			    iconImageSize: [50, 50],
				iconImageOffset: [-25, -50],
				iconContentOffset: [15, 15],
				iconContentLayout: MyIconContentLayout
			});
			myPlacemarkWithContent_5 = new ymaps.Placemark([53.662753, 23.803882], {
				hintContent: 'Офис 5', 
				balloonContent: 'г. Гродно, ул. Лазо, 16' 
			}, {
				iconLayout: 'default#imageWithContent',
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
			    iconImageSize: [50, 50],
				iconImageOffset: [-25, -50],
				iconContentOffset: [15, 15],
				iconContentLayout: MyIconContentLayout
			});
			myPlacemarkWithContent_6 = new ymaps.Placemark([53.926181, 30.327789], {
				hintContent: 'Офис 6', 
				balloonContent: 'г. Могилёв, ул. Лазо, 16' 
			}, {
				iconLayout: 'default#imageWithContent',
				iconImageHref: '/wp-content/themes/consultix/images/amocrm/iconsilver.png', 
			    iconImageSize: [50, 50],
				iconImageOffset: [-25, -50],
				iconContentOffset: [15, 15],
				iconContentLayout: MyIconContentLayout
			});
		//Добавляем маркеры на карту
		myMap.geoObjects.add(myPlacemarkWithContent_1).add(myPlacemarkWithContent_2).add(myPlacemarkWithContent_3).add(myPlacemarkWithContent_4).add(myPlacemarkWithContent_5).add(myPlacemarkWithContent_6);
		//Обрабатываем клик по кнопке
		jQuery('.open-map').click(function(){
			//Забираем координаты из кнопки
            var loc = jQuery(this).attr('data-coord');
            loc = JSON.parse(loc);
            //Увеличиваем карту до нужного размера
            myMap.setZoom(16,{smooth:true,centering:true});
            //Перемещаем карту к нужной метке
            myMap.panTo(loc);
            //Плавная прокрутка до блока с картой
            document.getElementById('yamap').scrollIntoView({
            	behavior: 'smooth',
                block: 'start'
    		})
        });
});
</script>

Результат работы скрипта

Офис 1

Адрес: г. Минск, ул. Лазо, 16

Офис 2

Адрес: г. Брест, ул. Лазо, 16

Офис 3

Адрес: г. Витебск, ул. Лазо, 14

Офис 4

Адрес: г. Гомель, ул. Лазо, 16

Офис 5

Адрес: г. Гродно, ул. Лазо, 16

Офис 6

Адрес: г. Могилёв, ул. Лазо, 16