Simple ymaps example with comments

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.441189, 22.719202],
        zoom: 17
    });

    //// добавляем ваш контрол
    // список городов — либо прописываем как есть, либо получаем с сервера заранее
    var cities = [{
        id: 1,
        name: 'Мукачево',
        coord: [48.441189, 22.719202],
        zoom: 16
    }, {
        id: 2,
        name: 'Москва',
        coord: [55.752736, 37.606815],
        zoom: 10
    }, {
        id: 3,
        name: 'Новосибирск',
        coord: [55.026366, 82.907803],
        zoom: 11
    }, {
        id: 4,
        name: 'Нью-Йорк',
        coord: [40.695537, -73.97552],
        zoom: 10
    }];

    // создаем массив контролов для селектора городов...
    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);
     ...