How to change the center of an existing Ya Maps API map?

Question

Yandex maps

I have two methods:
1) mainMap() - creating the map itself.
2) setPoint() - changes its center when the button is clicked.
I determined the coordinates, all the data is there.
The PROBLEM is that I can't change the created map in mainMap() in the setPoint() method.

let deliveryMap = {
    run() {
        deliveryMap.mainMap();
        $(document).on('click', '[data-store-id]', event => this.setPoint(event));
    },

    setPoint(event) {
        let storeId = event.currentTarget.attributes['data-store-id'].value;
        let storesPoints = [stores[storeId]['GPS_N'], stores[storeId]['GPS_S']];
        /*ymaps.ready(function () {
            let myMap = new ymaps.Map('mapStores', {
                center: storesPoints,
                zoom: 13,
                controls: []
            }, {
                searchControlProvider: 'yandex#search'
            });
            myMap.setCenter([51.781876, 55.095035], 10, {
                checkZoomRange: true
            });
        });*/
    },

    mainMap() {
        if ($('[data-stores-map]').length) {
            let tempValue = Object.values(stores);
            let storesPoints = [tempValue[0]['GPS_N'], tempValue[0]['GPS_S']];
            ymaps.ready(function () {
                let myMap = new ymaps.Map('mapStores', {
                    center: storesPoints,
                    zoom: 13,
                    controls: []
                }, {
                    searchControlProvider: 'yandex#search'
                });
                for (let j = 0; j < tempValue.length; j++) {
                    let storePoint = [tempValue[j]['GPS_N'], tempValue[j]['GPS_S']];
                    let specialText = '';
                    if (tempValue[j]['SCHEDULE'].length) {
                        specialText += '<b>Часы работы:</b><br>';
                        specialText += tempValue[j]['SCHEDULE'] + '</br>';
                    }
                    window['placemark_' + tempValue[j]['ID']] = new ymaps.Placemark(storePoint, {
                        balloonContentHeader: tempValue[j]['TITLE'],
                        balloonContentBody: specialText,
                        balloonContentFooter: '',
                        hintContent: tempValue[j]['TITLE']
                    });
                    myMap.geoObjects.add(window['placemark_' + tempValue[j]['ID']]);

                    if (tempValue.length > 1) {
                        myMap.setBounds(myMap.geoObjects.getBounds());
                        // myMap.setZoom(myMap.getZoom() - 1);
                    }
                }
            });
        }
    }
};

module.exports = deliveryMap;

Answer 1

As a result, I did not manage to implement better than doing this:

let deliveryMap = {
    run() {
        deliveryMap.mainMap();
    },

    mainMap() {
        if ($('[data-stores-map]').length) {
            let tempValue = Object.values(stores);
            let storesPoints = [tempValue[0]['GPS_N'], tempValue[0]['GPS_S']];
            ymaps.ready(function () {
                let myMap = new ymaps.Map('mapStores', {
                    center: storesPoints,
                    zoom: 13,
                    controls: []
                }, {
                    searchControlProvider: 'yandex#search'
                });
                for (let j = 0; j < tempValue.length; j++) {
                    let storePoint = [tempValue[j]['GPS_N'], tempValue[j]['GPS_S']];
                    let specialText = '';
                    if (tempValue[j]['SCHEDULE'].length) {
                        specialText += '<b>Часы работы:</b><br>';
                        specialText += tempValue[j]['SCHEDULE'] + '</br>';
                    }
                    window['placemark_' + tempValue[j]['ID']] = new ymaps.Placemark(storePoint, {
                        balloonContentHeader: tempValue[j]['TITLE'],
                        balloonContentBody: specialText,
                        balloonContentFooter: '',
                        hintContent: tempValue[j]['TITLE']
                    });
                    myMap.geoObjects.add(window['placemark_' + tempValue[j]['ID']]);

                    if (tempValue.length > 1) {
                        myMap.setBounds(myMap.geoObjects.getBounds());
                    }
                }

                $(document).on('click', '[data-store-id]', function (e) {
                    e.preventDefault();
                    let storeId = e.currentTarget.attributes['data-store-id'].value;
                    let storesPoints = [stores[storeId]['GPS_N'], stores[storeId]['GPS_S']];
                    myMap.setCenter(storesPoints, 10, {
                        checkZoomRange: true
                    });
                });

            });
        }
    }
};

module.exports = deliveryMap;

If someone has ideas on how to write code more aesthetically, I will be glad to see and listen to advice and criticism!)