<script src="https://api-maps.yandex.ru/1.1/index.xml" type="text/javascript"></script>
<script type="text/javascript">
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]),
destinations = {
'ЗАО птицефабрика «Октябрьская»<br />630126, г. Новосибирск, ул. Выборная, 211': new YMaps
.GeoPoint(83.056444, 54.99759),
'ЗАО птицефабрика «Ново-Барышевская»<br />630554, Новосибирская область, Новосибирский район, с. Барышево, ул. Ленина 160': new YMaps
.GeoPoint(83.1926219, 54.964073),
'ЗАО птицефабрика «Посевнинская»<br />633511, Новосибирская область, Черепановский район, р.п. Посевная, ул. Промышленная 1а': new YMaps
.GeoPoint(83.325462, 54.28953),
'ЗАО Племзавод «Медведский»<br />633514, Новосибирская область, Черепановский район, с. Медведск, ул. Набережная 9': new YMaps
.GeoPoint(83.551971, 54.402152),
'ЗАО птицефабрика «Каргатская»<br />632435, Новосибирская область, Каргатский район, с. Набережное, ул. Лесная': new YMaps
.GeoPoint(80.178879, 55.176321)
};
// Центрируем карту на первом городе
map.setCenter(destinations[
'ЗАО птицефабрика «Октябрьская»<br />630126, г. Новосибирск, ул. Выборная, 211'], 15);
// Ссылка на контейнер для меню
var menuContainer = YMaps.jQuery('#mapMenu');
// Генерирование меню
for (var item in destinations) {
// Используем замыкание, чтобы работать с конкретным свойством объекта
(function (title, geoPoint) {
// Создаем ссылку, обернутую в тег <p> для более приятного визуального восприятия
YMaps.jQuery("<li><a href=\"#\">" + item + "</a></li>")
.find('a')
// Создаем обработчик по щелчку на ссылке
.bind('click', function () {
// Подчеркиваем все ссылки
menuContainer.find('a').css('text-decoration', 'underline');
// Кроме той, на которую щелкнули
YMaps.jQuery(this).css('text-decoration', 'none');
// Перемещаем карту
map.panTo(geoPoint, {
flying: 1
});
return false;
})
.end()
// Записываем элемент списка в список
.appendTo(menuContainer);
})(item, destinations[item])
}
});
</script>
<div id="YMapsID" style="width:100%;height:300px"></div>
<ul id="mapMenu"></ul>
Рабочий пример