<div id="map" class="contsec mapsec" style="background: none;">
<div class="div-block-41">
<div class="html-embed w-embed w-script" style="display: block">
<script src="https://api-maps.yandex.ru/2.1/?apikey=4acf52fb-0967-4e9f-ad53-be7540b93a1d&lang=ru_RU&scroll=false"></script>
<div id="y_map" style="width: 100%; height: 100%"></div>
<style>
#zoom-in,#zoom-out{
position: static;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 60px;
height: 60px;
padding: 19px;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
border-radius: 50%;
background-color: teal;
color: #fff;
font-size: 40px;
line-height: 40;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
ymaps.ready(function() {
var MyZoomLayout = ymaps.templateLayoutFactory.createClass("<div>" +
"<div id='zoom-in'><img src='https://assets.website-files.com/5f60a11b6266a7727a451a69/5f85a98632d41011dd4526f5_plus.svg'></div>" +
"<div id='zoom-out'><img src='https://assets.website-files.com/5f60a11b6266a7727a451a69/5f85a9869864d5baa093d2f3_minus.svg'></div>" +
"</div>", {
build: function () {
// Сначала вызываем родительский метод.
MyZoomLayout.superclass.build.call(this);
// Запомним функции-обработчики, за которым закреплен контекст,
// чтобы впоследствии от них отписаться.
this.zoomInCallback = ymaps.util.bind(this.zoomIn, this);
this.zoomOutCallback = ymaps.util.bind(this.zoomOut, this);
$('#zoom-in').bind('click', this.zoomInCallback);
$('#zoom-out').bind('click', this.zoomOutCallback);
},
clear: function () {
// Снимаем слушателей.
$('#zoom-in').unbind('click', this.zoomInCallback);
$('#zoom-out').unbind('click', this.zoomOutCallback);
// А затем вызываем родительский метод.
MyZoomLayout.superclass.clear.call(this);
},
zoomIn: function () {
var map = this.getData().control.getMap();
// Посылаем событие, которое описано в интерфейсе IZoomControlLayout.
this.events.fire('zoomchange', {
oldZoom: map.getZoom(),
// При клике на '+' будет послана команда увеличить
// текущий коэффициент масштабирования на 1
newZoom: map.getZoom() + 1
});
},
zoomOut: function () {
var map = this.getData().control.getMap();
this.events.fire('zoomchange', {
oldZoom: map.getZoom(),
// При клике на '-' будет послана команда уменьшить
// текущий коэффициент масштабирования на 1
newZoom: map.getZoom() - 1
});
}
});
// var customZoom = new ymaps.control.SmallZoomControl({layout: MyZoomLayout});
var myMap = new ymaps.Map('y_map', {
center: [59.879089, 30.419071],
zoom: 13,
controls: []
}, {
searchControlProvider: 'yandex#search'
}),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
),
myPlacemark = new ymaps.Placemark([59.879089, 30.419071], {}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'https://uploads-ssl.webflow.com/5f60a11b6266a7727a451a69/5f72f3bd4c04533e1734b68d_label.png',
// Размеры метки.
iconImageSize: [50, 70],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-10, -55]
});
myMap.panes.get('ground').getElement().style.filter = 'grayscale(80%)';
myMap.geoObjects.add(myPlacemark);
myMap.behaviors.disable('scrollZoom');
// myMap.controls.add('smallZoomControl', { top: 70, right: 5 });
// myMap.controls.add(ymaps.control.ZoomControl({layout: MyZoomLayout}));
myMap.controls.add('zoomControl',{position: {right: 10, top: 50}, layout: MyZoomLayout});
});
</script>
</div>
</div>
</div>