Как вставить в карту 2gis свои кнопки?

Question

[Максим Иванов]

.zoom {
	width: 60px;
	height: 150px;
}

.zoom-in {
	background-color: #fff;
	width: 30px;
	height: 30px;
	border-radius: 50%;
}

.zoom-out {
	background-color: #f5f5f5;
	width: 25px;
	height: 25px;
	border-radius: 50%;
}

<div id="map">
	<div class="zoom">
		<div class="zoom-in"></div>
		<div class="zoon-out"></div>
	</div>
</div>

var map;
	
	    DG.then(function () {
	        map = DG.map('map', {
	            center: [55.785044, 38.424711],
	            zoom: 13,
	            scrollWheelZoom: false,
	            zoomControl: false,
	        });
                myIcon = DG.icon({
                    iconUrl: 'img/map/1.png',
                    iconSize: [113, 67]
                });
                DG.marker([55.778599, 38.381416], {
                    icon: myIcon
                }).addTo(map);
                DG.marker([55.790473, 38.474258], {
                    icon: myIcon
                }).addTo(map);
	    });

Answer 1

[0xD34F]

Вынести .zoom за пределы карты, добавить общую обёртку с относительным позиционированием:

<div class="map-wrapper">
  <div class="zoom">
    <div data-zoom="+1" class="zoom-in"></div>
    <div data-zoom="-1" class="zoom-out"></div>
  </div>
  <div class="map"></div>
</div>

.map-wrapper {
  position: relative;
}

Чтобы .zoom отображался поверх карты, задать ему z-index и абсолютное позиционирование:

.zoom {
  position: absolute;
  z-index: 666;
}

Добавить обработчик клика по кнопкам:

document.querySelector('.zoom').addEventListener('click', function(e) {
  const zoomChange = +e.target.dataset.zoom;
  if (zoomChange) {
    map.setZoom(map.getZoom() + zoomChange);
  }
});

https://jsfiddle.net/mu32azvy/