JSFiddle - React, Tailwind, and code Playground

by Yugas Anton

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=debug"></script>
<div id="map"></div>

CSS

html, body, #map {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

JavaScript

ymaps.ready(init);

function init() {
    // пара переменных для циклов.
    var i, l;

    // создаем и настраиваем карту
    var myMap = new ymaps.Map("map", {
        center: [48.41, 22.74],
        zoom: 10,
        controls: ['zoomControl', 'searchControl', 'typeSelector',  'fullscreenControl', 'geolocationControl']
    });

    // список городов
    var cities = [{
        id: 1,
        name: 'Ужгород',
        coord: [48.62286670, 22.29921289],
        zoom: 18
    }, {
        id: 2,
        name: 'Мукачево',
        coord: [48.44114136, 22.71901487],
        zoom: 18
    }, {
        id: 3,
        name: 'Іршава',
        coord: [48.31294314, 23.04127557],
        zoom: 18
    }];

    // создаем массив контролов для селектора городов
    var cityListItems = [];
    // и заполняем его городами, описанными выше
    
    // для каждого города выполняем
    for (i = 0, l = cities.length; i < l; i += 1) {
        // создаем контрол элемента списка
        // cities[i] здесь город
        var cityListItem = new ymaps.control.ListBoxItem({
            // см. тут maps/doc/jsapi/2.1/ref/reference/control.ListBoxItem.xml#constructor-summary
            data: {
                // передаем параметры
                content: cities[i].name
            },
            options: {
                // отключаем выбор по клику
                selectOnClick: false
            }
        });

        // добавляем действие на клик по городу
        // здесь передаем город как контекст (this)
        cityListItem.events.add('click', onCityClick, cities[i]);

        // добавляем контрол элемента списка в массив
        cityListItems.push(cityListItem);
    }
    // описываем что должно происходить при клике по городу
    function onCityClick(e) {
        // используем здесь this (cities[i])
        // для получения координат и зума
        myMap.setCenter(this.coord);
        myMap.setZoom(this.zoom);
    }

    // создаем контрол селектора городов
    var cityListControl =...