Несколько яндекс-карт по требованию

Question

Мне нужно выводить несколько карт по клику.

Если одна карта, все понятно, это есть в документации:


function init () {
    var myMap;

    $('.js-service-points-link').bind({
        click: function () {
            if (!myMap) {
                myMap = new ymaps.Map('map', {
                    center: [55.010251, 82.958437], // Новосибирск
                    zoom: 9
                }, {
                    searchControlProvider: 'yandex#search'
                });
            }
            else {
                myMap.destroy();// Деструктор карты
                myMap = null;
            }
        }
    });
}

Но мне нужно несколько карт с разными координатами.

Не нашла в документации. Подскажите как выглядит подобная функция в цикле.

Answer 1

Как-то так:


    // Как только будет загружен API и готов DOM, выполняем инициализацию
    ymaps.ready(init);

    var serviceMaps = [];
    var serviceCoors = [
        [50, 40],
        [50, 50]
    ];
    var serviceQuantity = $('[data-latitude][data-longitude]').length;

    // Инициализация и уничтожение карты при нажатии на кнопку.
    function init () {

        $('.js-service-points-link').bind({
            click: function () {
                for (var q = 0; q < serviceQuantity; q++) {
                    var ind = q + 1;
                    var mapId = 'map' + ind;

                    if (!serviceMaps[q]) {
                        serviceMaps[q] = new ymaps.Map(mapId, {
                            center: serviceCoors[q],
                            zoom: 9,
                            controls: ['zoomControl', 'fullscreenControl']
                        });
                    }
                    else {
                        serviceMaps[q].destroy();// Деструктор карты
                        serviceMaps[q] = null;
                    }
                }
            }
        });
    }

});```

БЛОГ НА HUSL

Несколько яндекс-карт по требованию

Ответы (1 шт):