Справочники, инструменты, документация<!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>
<script src="https://api-maps.yandex.ru/2.1/?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: '/assets/img/map-icons.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: '/assets/img/map-icons.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: '/assets/img/map-icons.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: '/assets/img/map-icons.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: '/assets/img/map-icons.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: '/assets/img/map-icons.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>
</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" style="width: 100%; height: 400px"></div>
</body>
</html>Офис 1
Минск, ул. Лазо, 16
Офис 2
Брест, ул. Лазо, 16
Офис 3
Витебск, ул. Лазо, 14
Офис 4
Гомель, ул. Лазо, 16
Офис 5
Гродно, ул. Лазо, 16
Офис 6
Могилёв, ул. Лазо, 16