<head>
<script type="text/javascript">
window.onload = function () {
var map = new YMaps.Map(document.getElementById("YMapsID")
destinations = {
'Киев' : new YMaps.GeoPoint(30.552502,50.448638),
'Петербург' : new YMaps.GeoPoint(30.313497,59.938531),
'Екатеринбург' : new YMaps.GeoPoint(60.617435,56.829748),
'Одесса' : new YMaps.GeoPoint(30.7058,46.466444),
'Одесrа' : new YMaps.GeoPoint(31.7058,43.466444),
'Одесfа' : new YMaps.GeoPoint(36.7058,36.466444),
'aaдесfа' : new YMaps.GeoPoint(38.7058,31.466444),
};
map.setCenter(new YMaps.GeoPoint(30.7058,46.466444), 17);
// Ссылка на контейнер для меню
var menuContainer = YMaps.jQuery('#mapMenu');
// Генерирование меню
for (var item in destinations) {
// Используем замыкание, чтобы работать с конкретным свойством объекта
(function (title, geoPoint) {
//Красим ссылки
menuContainer.find('a').css('color', '#575757');
menuContainer.find('a').css('color', '#575757');
menuContainer.find('a').css('margin-left', '690px');
menuContainer.find('a').css('position', 'relative');
menuContainer.find('a').css('top', '-450px');
// Создаем ссылку, обернутую в тег <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])
}
map.addOverlay(mk);
map.addControl(new YMaps.ScaleLine()
map.addControl(new YMaps.Zoom()
map.enableScrollZoom(
YMaps.Events.observe(mk, mk.Events.Load, function (mk) {
mk.get(0).forEach(function (obj) {
obj.setBalloonOptions({
margin: [10, 20, 30, 40], maxWidth:300
}
}
}
}
</script>
</head>
<body>
<div id="YMapsID" style="width:680px;height:430px"></div>
<ul id="mapMenu"></ul>
</body>