JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&mode=debug"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></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
});
//// добавляем ваш контрол
// список городов — либо прописываем как есть, либо получаем с сервера заранее
var cities = [{
id: 1,
name: 'Ужгород',
coord: [48.62286670, 22.29921289],
zoom: 17
}, {
id: 2,
name: 'Мукачево',
coord: [48.44114136, 22.71901487],
zoom: 17
}, {
id: 3,
name: 'Іршава',
coord: [48.31294314, 23.04127557],
zoom: 17
}];
// создаем массив контролов для селектора городов...
var cityListItems = [];
// и заполняем его городами, описанными выше
// для каждого города выполняем
for (i = 0, l = cities.length; i < l; i += 1) {
// создаем контрол элемента списка
// cities[i] здесь город
var cityListItem = new ymaps.control.ListBoxItem({
// см. тут http://api.yandex.ru/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 =...