How to insert custom buttons into 2gis map?

Question

JavaScript

.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

Move .zoomoutside the map, add a general wrapper with relative positioning:

<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;
}

To .zoomdisplay on top of the map, set it to z-indexabsolute positioning:

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

Add button click handler:

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

https://jsfiddle.net/mu32azvy/