Как в react-yandex-map настроить zoom, чтобы все метки на карте помещались?

Question

[mr jeery]

Метки могут быть в разных городах, но при раскрытии карты необходимо установить такой масштаб, чтобы все метки поместились. Застрял на этой проблеме именно с react, нашел такое решение, но не могу его переписать в React.

// Создаем коллекцию геообъектов.
var myCollection = new ymaps.GeoObjectCollection();

// Добавляем метки в коллекцию.
myCollection.add(new ymaps.Placemark([37.61, 55.75]));
myCollection.add(new ymaps.Placemark([13.38, 52.51]));
myCollection.add(new ymaps.Placemark([30.30, 50.27]));

// При наведении на одну из меток подсвечиваем коллекцию целиком.
myCollection.events
    .add("mouseenter", function () {
        myCollection.options.set("preset", "twirl#redIcon");
})
.add("mouseleave", function () {
    myCollection.options.unset("preset");
});

// Добавляем коллекцию на карту.
myMap.geoObjects.add(myCollection);
// Устанавливаем карте центр и масштаб так, чтобы охватить коллекцию  целиком.
myMap.setBounds(myCollection.getBounds());

У меня получается создать коллекцию, но Ymaps и Map не имеют метода setBounds (выводил в console.log(ymaps) и console.log(map)).

<YMaps onApiAvaliable={(ymaps) => this.handleApiAvaliable(ymaps)} >
      <Map instanceRef={(maps) => this.handleMapAvaliable(maps)}
      </Map>
  </YMaps>

Может быть, есть другой метод?

Answer 1

[0xD34F]

У меня получается создать коллекцию, но Ymaps и Map не имеют метода setBounds (выводил в console.log(ymaps) и console.log(map)).

В это я поверить не могу. Метод setBounds у map всё-таки есть - просто если метод не собственный, а принадлежит прототипу, то в консоли он не показывается.