How to make several Yandex.Maps with custom buttons in a loop?

Question

JavaScript

A certain amount of Yandex.Maps is displayed, now 3, in a loop. It is forbidden to scroll and move on them. A button is added, when pressed, you can move the map. The button works for one card. And for several in the cycle is gone.

$(document).ready(function () {
  ymaps.ready(init);

  var maps = [];
  var placemarks = [];
  var centers = [
    [50, 40],
    [50, 40],
    [50, 40],
  ];
  var dragBtns = [];
  var N = $('.bMap').length;

  function init () {
    for (var q = 0; q < N; q++) {
      var ind = q + 1;
      var mapId = 'map' + ind;

      maps[q] = new ymaps.Map(mapId, {
        center: centers[q],
        zoom: 16,
        controls: ['zoomControl', 'fullscreenControl']
      });

      maps[q].behaviors.disable('scrollZoom');
      maps[q].behaviors.disable('drag');

      placemarks[q] = new ymaps.Placemark(centers[q], {
        hintContent: 'Title',
        balloonContent: ''}, {
        iconLayout: 'default#image',
        iconImageHref: 'img/map-pin.png',
        iconImageSize: [76, 93],
        iconImageOffset: [-38, -67]
      });

      maps[q].geoObjects.add(placemarks[q]);

      // enable/disable drag map
      dragBtns[q] = new ymaps.control.Button('<b>Двигать карту</b>');

      function enableBtn (q) {
        // ПОХОЖЕ ПРОБЛЕМА ЗДЕСЬ
        maps[q].behaviors.enable('drag');
      }

      function disableBtn (q) {
        // И ЗДЕСЬ
        maps[q].behaviors.disable('drag');
      }

      dragBtns[q].events
        .add('select', enableBtn(q))
        .add('deselect', disableBtn(q));

      maps[q].controls.add(dragBtns[q], {
        float: "left",
        maxWidth: 155
      });
      // /
    } // /for
  }
});

Answer 1

Move enableBtn/disableBtn outside of the loop, and rewrite them like this:

function enableBtn(e) {
  e.get('target').getMap().behaviors.enable('drag');
}

function disableBtn(e) {
  e.get('target').getMap().behaviors.disable('drag');
}

// или

const [ enableBtn, disableBtn ] = [ 'enable', 'disable' ].map(method =>
  e => e.get('target').getMap().behaviors[method]('drag')
);

You don't need to call them when assigning event handlers to buttons:

dragBtns[q].events
  .add('select', enableBtn)
  .add('deselect', disableBtn);