API Яндекс.Карт Работаем с группой маркеров – версия 2

На своем блоге я уже рассказывал, как можно работать с группами маркеров в API Яндекс.Карт версии 1.0 — API Яндекс.Карт Работаем с группой маркеров.

В этой заметке я раскажу Вам про особенности работы  с группами маркеров в API Яндекс.Карт версии 1.1

И так в начале новый код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-1 Работаем с грпуппами объектов на Яндекс.Карте v1.1</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
		 //Кинотеатры
            var k = new YMaps.Style();
            k.iconStyle = new YMaps.IconStyle();
            k.iconStyle.offset = new YMaps.Point(-15, -15);
            k.iconStyle.href = "http://webmap-blog.ru/examples/Ris/kinoteatrs.jpg";
            k.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("kino#customPoint", k);
 
            //Театры
            var s = new YMaps.Style();
            s.iconStyle = new YMaps.IconStyle();
            s.iconStyle.offset = new YMaps.Point(-15, -15);
            s.iconStyle.href = "http://webmap-blog.ru/examples/Ris/theatr.jpg";
            s.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("teatr#customPoint", s);
 
            //Гостиницы
            var hs = new YMaps.Style();
            hs.iconStyle = new YMaps.IconStyle();
            hs.iconStyle.offset = new YMaps.Point(-15, -15);
            hs.iconStyle.href = "http://webmap-blog.ru/examples/Ris/hotels.jpg";
            hs.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("hotel#customPoint", hs);
 
 
            //Вокзалы
            var v = new YMaps.Style();
            v.iconStyle = new YMaps.IconStyle();
            v.iconStyle.offset = new YMaps.Point(-15, -15);
            v.iconStyle.href = "http://webmap-blog.ru/examples/Ris/trans_main.jpg";
            v.iconStyle.size = new YMaps.Point(30, 30);
            YMaps.Styles.add("vokzal#customPoint", v);
 
// Группы объектов
            var groups = [
                createGroup("Кинотеатры", [
                                createPlacemark(new YMaps.GeoPoint(43.865382,56.354627), "Кинотеатр Буревестник"),
createPlacemark(new YMaps.GeoPoint(43.976737,56.269141), "Кинотеатр Зарница"),
createPlacemark(new YMaps.GeoPoint(43.959184,56.237457), "Кинотеатр Импульс"),
createPlacemark(new YMaps.GeoPoint(43.934355,56.313329), "Кинотеатр Искра"),
createPlacemark(new YMaps.GeoPoint(43.944335,56.317977), "Кинотеатр Канавинский"),
createPlacemark(new YMaps.GeoPoint(43.859471,56.241259), "Кинотеатр Мир"),
createPlacemark(new YMaps.GeoPoint(43.993976,56.317213), "Кинотеатр Октябрь"),
createPlacemark(new YMaps.GeoPoint(43.996303,56.318596), "Кинотеатр Орленок"),
createPlacemark(new YMaps.GeoPoint(43.837983,56.343429), "Кинотеатр Ракета"),
createPlacemark(new YMaps.GeoPoint(44.00481,56.323812), "Киноцентр Рекорд"),
createPlacemark(new YMaps.GeoPoint(43.93104,56.286148), "Кинотеатр Россия"),
createPlacemark(new YMaps.GeoPoint(44.073827,56.308056), "Кинотеатр Синема Парк"),
createPlacemark(new YMaps.GeoPoint(43.93404,56.328928), "Кинотеатр Смена"),
createPlacemark(new YMaps.GeoPoint(43.871158,56.347345), "Кинотеатр Сормовский"),
createPlacemark(new YMaps.GeoPoint(44.026297,56.31927), "Каро Фильм в ТЦ Шоколад"),
createPlacemark(new YMaps.GeoPoint(43.978839,56.274389), "Кинотеатр Электрон"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.363992), "Кинотеатр Юность")
                ], "kino#customPoint"),
 
                createGroup("Театры", [
createPlacemark(new YMaps.GeoPoint(43.9321,56.340704), "Вера,  Детский театр"),
createPlacemark(new YMaps.GeoPoint(44.002321,56.320203), "Театр Комедиа"),
createPlacemark(new YMaps.GeoPoint(44.00136,56.324117), "Театр Драмы"),
createPlacemark(new YMaps.GeoPoint(43.995898,56.318371), "Театр Кукол"),
createPlacemark(new YMaps.GeoPoint(44.017063,56.315695),"Театр Оперы и балета"),
createPlacemark(new YMaps.GeoPoint(44.010487,56.316444), "Театр Юнного Зрителя"),
createPlacemark(new YMaps.GeoPoint(43.933915,56.307501), "Преображение,  Муниципальный театр ритмопластики"),
createPlacemark(new YMaps.GeoPoint(44.003588,56.324736), "Учебная сцена,  Учебный театр Театрального училища")
                ], "teatr#customPoint"),
 
                createGroup("Гостиницы", [
        	createPlacemark(new YMaps.GeoPoint(43.861663,56.242589), "Гостиница Автозаводская"),
createPlacemark(new YMaps.GeoPoint(44.023432,56.329737), "Гостиница Александровский сад"),
createPlacemark(new YMaps.GeoPoint(43.793158,56.219372), "Гостиница Аэрофлот"),
createPlacemark(new YMaps.GeoPoint(44.025183,56.293517), "Гостиница Берег"),
createPlacemark(new YMaps.GeoPoint(44.010963,56.329093), "Гостиница Волжский откос"),
createPlacemark(new YMaps.GeoPoint(43.869505,56.243214), "Гостиница Волна"),
createPlacemark(new YMaps.GeoPoint(43.991676,56.326308), "Гостиница На Ильинке"),
createPlacemark(new YMaps.GeoPoint(44.000183,56.324501), "Гостиница Никола Хаус"),
createPlacemark(new YMaps.GeoPoint(43.929701,56.321112), "Гостиница Николь"),
createPlacemark(new YMaps.GeoPoint(44.01982,56.328369), "Гостиница Октябрьская"),
createPlacemark(new YMaps.GeoPoint(43.813981,56.310253), "Гостиница Орион"),
createPlacemark(new YMaps.GeoPoint(43.961062,56.331368), "Гостиница Сервис-Ярмарка"),
createPlacemark(new YMaps.GeoPoint(43.990239,56.323163), "Гостиница Сергиевская"),
createPlacemark(new YMaps.GeoPoint(43.924617,56.333469), "Гостиница Стрелка"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.311017), "Гостиница Трансэкспедитор"),
createPlacemark(new YMaps.GeoPoint(43.995629,56.325409), "Гостиница У Домика Петра"),
createPlacemark(new YMaps.GeoPoint(44.006004,56.3251), "Гостиница ГП Областной дом крестьянина"),
createPlacemark(new YMaps.GeoPoint(43.95233,56.317537), "Гостиница Дома артиста"),
createPlacemark(new YMaps.GeoPoint(44.030205,56.323847), "Гостиница НГЛУ им. Н. А. Добролюбова"),
createPlacemark(new YMaps.GeoPoint(43.864457,56.362207), "Гостиница ОАО Красное Сормово"),
createPlacemark(new YMaps.GeoPoint(43.974959,56.294955), "Гостиница учебно-методического центра Облсовпрофа"),
createPlacemark(new YMaps.GeoPoint(43.920907,56.329617), "Гостиница ФГУП ОКБ машиностроения им. И. И. Африкантова"),
createPlacemark(new YMaps.GeoPoint(43.825793,56.341533), "Гостиница ЧП Хажаев Р. Ж.")
                ], "hotel#customPoint"),
 
                createGroup("Вокзалы", [
          createPlacemark(new YMaps.GeoPoint(43.945763,56.321621), "Московский вокзал"),
createPlacemark(new YMaps.GeoPoint(43.987903,56.329552), "Речной вокзал"),
createPlacemark(new YMaps.GeoPoint(43.981202,56.304545), "Автовокзал"),
createPlacemark(new YMaps.GeoPoint(43.950641,56.324631), "Автстанция Канавинская"),
createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), "Автостанция Сенная")
                ], "vokzal#customPoint")
            ];
 
            // Создание списка групп
            for (var i = 0; i < groups.length; i++) {
                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
            }
        })
 
        // Добавление одного пункта в список
        function addMenuItem (group, map, menuContainer) {
 
            // Показать/скрыть группу на карте
            YMaps.jQuery("<a class="title" href="#">" + group.title + "</a>")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);
 
                    // Если пункт меню "неактивный", то добавляем группу на карту,
                    // иначе - удаляем с карты
                    if (link.hasClass("active")) {
                        map.removeOverlay(group);
                    } else {
                        map.addOverlay(group);
                    }
 
                    // Меняем "активность" пункта меню
                    link.toggleClass("active");
 
                    return false;
                })
 
                // Добавление нового пункта меню в список
                .appendTo(
                    YMaps.jQuery("<li></li>").appendTo(menuContainer)
                )
        };
 
        // Создание группы
        function createGroup (title, objects, style) {
            var group = new YMaps.GeoObjectCollection(style);
 
            group.title = title;
            group.add(objects);
 
            return group;
        };
 
        // Создание метки
        function createPlacemark (point, name, description) {
            var placemark = new YMaps.Placemark(point);
 
            placemark.name = name;
            placemark.description = description;
 
            return placemark
        }
    </script> 
 
    <style type="text/css"> 
        /* Оформление меню (начало)*/
 
            #menu {
                list-style: none;
 
                margin: 0;
                padding: 0;
            }
 
            #menu a {
                text-decoration: none;
 
                border-bottom: dashed 1px;
            }
 
            a.active {
                color: #000;
            }
 
        /* Оформление меню (конец)*/
    </style> 
 
</head> 
 
<body> 
    <table> 
    <tr> 
        <td><div id="YMapsID" style="width:800px;height:700px"></div></td> 
        <td valign="top"><ul id="menu"></ul></td> 
    </tr> 
    </table> 
</body> 
 
</html>

Первое отличие это номер версии в коде определения ключа к API Яндекс.Карт

http://api-maps.yandex.ru/1.1/index.xml?key=…

В состав данной версии API входит фреймворк jQuery.

За создание группы отвечает функция createGroup.

В нее передаются следующие параметры:

  • Наименование – title,
  • Набор объектов (точек) – object,
  • Стиль отображения для конкретной группы – style

Класс YMaps.GeoObjectCollection объединяет объекты в группу .

Функция createPlacemark создает отдельную метку.

Создаем массив групп меток groups, на основе которого будет формироваться меню .

Функция addMenuItem добавляет отдельный пункт меню в список.

В цикле мы формируем меню

// Создание списка групп
for (var i = 0; i < groups.length; i++) {
addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
}

Посмотреть пример в действии.

В этом примере мы определяли свои значки для обозначения меток, но можно использовать и встроенные в API.

Для этого необходимо удалить фрагмент кода с определением пользовательских значков, а для каждой группы задать стиль из API.

Полный перечень встроенных стилей значков содержится здесь

Для второго примера я использовал следующие стили:

"default#cinemaIcon" – кинотеатры;
"default#teatherIcon" – театры;
"default#campingIcon" – гостиницы;
"default#trainIcon" – вокзалы

Код примера:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-2 Работаем с грпуппами объектов на Яндекс.Карте v1.1</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script> 
    <script type="text/javascript"> 
        // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
 
// Группы объектов
            var groups = [
                createGroup("Кинотеатры", [
                                createPlacemark(new YMaps.GeoPoint(43.865382,56.354627), "Кинотеатр Буревестник"),
createPlacemark(new YMaps.GeoPoint(43.976737,56.269141), "Кинотеатр Зарница"),
createPlacemark(new YMaps.GeoPoint(43.959184,56.237457), "Кинотеатр Импульс"),
createPlacemark(new YMaps.GeoPoint(43.934355,56.313329), "Кинотеатр Искра"),
createPlacemark(new YMaps.GeoPoint(43.944335,56.317977), "Кинотеатр Канавинский"),
createPlacemark(new YMaps.GeoPoint(43.859471,56.241259), "Кинотеатр Мир"),
createPlacemark(new YMaps.GeoPoint(43.993976,56.317213), "Кинотеатр Октябрь"),
createPlacemark(new YMaps.GeoPoint(43.996303,56.318596), "Кинотеатр Орленок"),
createPlacemark(new YMaps.GeoPoint(43.837983,56.343429), "Кинотеатр Ракета"),
createPlacemark(new YMaps.GeoPoint(44.00481,56.323812), "Киноцентр Рекорд"),
createPlacemark(new YMaps.GeoPoint(43.93104,56.286148), "Кинотеатр Россия"),
createPlacemark(new YMaps.GeoPoint(44.073827,56.308056), "Кинотеатр Синема Парк"),
createPlacemark(new YMaps.GeoPoint(43.93404,56.328928), "Кинотеатр Смена"),
createPlacemark(new YMaps.GeoPoint(43.871158,56.347345), "Кинотеатр Сормовский"),
createPlacemark(new YMaps.GeoPoint(44.026297,56.31927), "Каро Фильм в ТЦ Шоколад"),
createPlacemark(new YMaps.GeoPoint(43.978839,56.274389), "Кинотеатр Электрон"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.363992), "Кинотеатр Юность")
                ], "default#cinemaIcon"),
                createGroup("Театры", [
createPlacemark(new YMaps.GeoPoint(43.9321,56.340704), "Вера,  Детский театр"),
createPlacemark(new YMaps.GeoPoint(44.002321,56.320203), "Театр Комедиа"),
createPlacemark(new YMaps.GeoPoint(44.00136,56.324117), "Театр Драмы"),
createPlacemark(new YMaps.GeoPoint(43.995898,56.318371), "Театр Кукол"),
createPlacemark(new YMaps.GeoPoint(44.017063,56.315695),"Театр Оперы и балета"),
createPlacemark(new YMaps.GeoPoint(44.010487,56.316444), "Театр Юнного Зрителя"),
createPlacemark(new YMaps.GeoPoint(43.933915,56.307501), "Преображение,  Муниципальный театр ритмопластики"),
createPlacemark(new YMaps.GeoPoint(44.003588,56.324736), "Учебная сцена,  Учебный театр Театрального училища")
                ], "default#teatherIcon"),
                createGroup("Гостиницы", [
        	createPlacemark(new YMaps.GeoPoint(43.861663,56.242589), "Гостиница Автозаводская"),
createPlacemark(new YMaps.GeoPoint(44.023432,56.329737), "Гостиница Александровский сад"),
createPlacemark(new YMaps.GeoPoint(43.793158,56.219372), "Гостиница Аэрофлот"),
createPlacemark(new YMaps.GeoPoint(44.025183,56.293517), "Гостиница Берег"),
createPlacemark(new YMaps.GeoPoint(44.010963,56.329093), "Гостиница Волжский откос"),
createPlacemark(new YMaps.GeoPoint(43.869505,56.243214), "Гостиница Волна"),
createPlacemark(new YMaps.GeoPoint(43.991676,56.326308), "Гостиница На Ильинке"),
createPlacemark(new YMaps.GeoPoint(44.000183,56.324501), "Гостиница Никола Хаус"),
createPlacemark(new YMaps.GeoPoint(43.929701,56.321112), "Гостиница Николь"),
createPlacemark(new YMaps.GeoPoint(44.01982,56.328369), "Гостиница Октябрьская"),
createPlacemark(new YMaps.GeoPoint(43.813981,56.310253), "Гостиница Орион"),
createPlacemark(new YMaps.GeoPoint(43.961062,56.331368), "Гостиница Сервис-Ярмарка"),
createPlacemark(new YMaps.GeoPoint(43.990239,56.323163), "Гостиница Сергиевская"),
createPlacemark(new YMaps.GeoPoint(43.924617,56.333469), "Гостиница Стрелка"),
createPlacemark(new YMaps.GeoPoint(43.826198,56.311017), "Гостиница Трансэкспедитор"),
createPlacemark(new YMaps.GeoPoint(43.995629,56.325409), "Гостиница У Домика Петра"),
createPlacemark(new YMaps.GeoPoint(44.006004,56.3251), "Гостиница ГП Областной дом крестьянина"),
createPlacemark(new YMaps.GeoPoint(43.95233,56.317537), "Гостиница Дома артиста"),
createPlacemark(new YMaps.GeoPoint(44.030205,56.323847), "Гостиница НГЛУ им. Н. А. Добролюбова"),
createPlacemark(new YMaps.GeoPoint(43.864457,56.362207), "Гостиница ОАО Красное Сормово"),
createPlacemark(new YMaps.GeoPoint(43.974959,56.294955), "Гостиница учебно-методического центра Облсовпрофа"),
createPlacemark(new YMaps.GeoPoint(43.920907,56.329617), "Гостиница ФГУП ОКБ машиностроения им. И. И. Африкантова"),
createPlacemark(new YMaps.GeoPoint(43.825793,56.341533), "Гостиница ЧП Хажаев Р. Ж.")
                ], "default#campingIcon"),
                createGroup("Вокзалы", [
          createPlacemark(new YMaps.GeoPoint(43.945763,56.321621), "Московский вокзал"),
createPlacemark(new YMaps.GeoPoint(43.987903,56.329552), "Речной вокзал"),
createPlacemark(new YMaps.GeoPoint(43.981202,56.304545), "Автовокзал"),
createPlacemark(new YMaps.GeoPoint(43.950641,56.324631), "Автстанция Канавинская"),
createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), "Автостанция Сенная")
                ], "default#trainIcon")
            ];
 
            // Создание списка групп
            for (var i = 0; i < groups.length; i++) {
                addMenuItem(groups[i], map, YMaps.jQuery("#menu"));
            }
        })
 
        // Добавление одного пункта в список
        function addMenuItem (group, map, menuContainer) {
 
            // Показать/скрыть группу на карте
            YMaps.jQuery("<a class="title" href="#">" + group.title + "</a>")
                .bind("click", function () {
                    var link = YMaps.jQuery(this);
 
                    // Если пункт меню "неактивный", то добавляем группу на карту,
                    // иначе - удаляем с карты
                    if (link.hasClass("active")) {
                        map.removeOverlay(group);
                    } else {
                        map.addOverlay(group);
                    }
 
                    // Меняем "активность" пункта меню
                    link.toggleClass("active");
 
                    return false;
                })
 
                // Добавление нового пункта меню в список
                .appendTo(
                    YMaps.jQuery("<li></li>").appendTo(menuContainer)
                )
        };
 
        // Создание группы
        function createGroup (title, objects, style) {
            var group = new YMaps.GeoObjectCollection(style);
 
            group.title = title;
            group.add(objects);
 
            return group;
        };
 
        // Создание метки
        function createPlacemark (point, name, description) {
            var placemark = new YMaps.Placemark(point);
 
            placemark.name = name;
            placemark.description = description;
 
            return placemark
        }
    </script> 
 
    <style type="text/css"> 
        /* Оформление меню (начало)*/
 
            #menu {
                list-style: none;
 
                margin: 0;
                padding: 0;
            }
 
            #menu a {
                text-decoration: none;
 
                border-bottom: dashed 1px;
            }
 
            a.active {
                color: #000;
            }
 
        /* Оформление меню (конец)*/
    </style> 
 
</head> 
 
<body> 
    <table> 
    <tr> 
        <td><div id="YMapsID" style="width:800px;height:700px"></div></td> 
        <td valign="top"><ul id="menu"></ul></td> 
    </tr> 
    </table> 
</body> 
 
</html>

Посмотреть пример в действии.

В упоминаемой мной в начале поста, заметке API Яндекс.Карт Работаем с группой маркеров содержится еще один пример, когда параметры, свойства и координаты меток храниться в файлах формата YMapsML.

Используем фреймворк jQuery для отображения и скрытия файлов формата YMapsML на Яндекс.Карте

Учитывая то, что фреймворк jQuery уже встроен в API код данного примера будет иметь следующий вид:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Пример-3 Работаем с грпуппами объектов на Яндекс.Карте с использованием jQuery</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script src="http://api-maps.yandex.ru/1.1/?key=ACuF2EkBAAAAzahYCgIASLsFm9n8EPvNjaTc8nAWiETKgYcAAAAAAAAAAAC-q61vWtIK3Kzt2yQ9qFaGJGKzXw==" type="text/javascript"></script> 
<style> 
 
.link:hover
{
text-decoration: none;
}
.link
{
cursor: pointer;
text-decoration: underline;
}
 
 
 
#show_hotels {
    background: url('http://webmap-blog.ru/examples/Ris/hotels.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin-bottom: 3px;
}
 
#show_kinoteatrs {
    background: url('http://webmap-blog.ru/examples/Ris/kinoteatrs.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_teatrs {
    background: url('http://webmap-blog.ru/examples/Ris/theatr.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
#show_vokzals {
    background: url('http://webmap-blog.ru/examples/Ris/trans_main.jpg') no-repeat left center;
    padding: 8px 0 6px 45px;
    line-height: 30px;
    margin: 3px 0;
}
 
 
 
    </style> 
 
 <script type="text/javascript"> 
 
            var xml_path = 'http://webmap-blog.ru/xml/';
 
  // Создание обработчика для события window.onLoad
        YMaps.jQuery(function () {
            // Создание экземпляра карты и его привязка к созданному контейнеру
            var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
 
            // Установка для карты ее центра и масштаба
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 11);
 
            // Добавление элементов управления
            map.enableScrollZoom();
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.Zoom());
 
// Кинотеатры
var kinoteatrs = new YMaps.YMapsML(xml_path+'kinonn.xml');
YMaps.Events.observe(kinoteatrs, kinoteatrs.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_kinoteatrs").toggle(function(){
map.addOverlay(kinoteatrs);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(kinoteatrs);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 
// Гостиницы
var hotels = new YMaps.YMapsML(xml_path+'hotelsnn.xml');
YMaps.Events.observe(hotels, hotels.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_hotels").toggle(function(){
map.addOverlay(hotels);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(hotels);
YMaps.jQuery(this).css("font-weight","normal");
});
 
// Театры
var teatrs = new YMaps.YMapsML(xml_path+'teatrnn.xml');
YMaps.Events.observe(teatrs, teatrs.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_teatrs").toggle(function(){
map.addOverlay(teatrs);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(teatrs);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
// Вокзалы и автостанции
var vokzals = new YMaps.YMapsML(xml_path+'vokzalnn.xml');
YMaps.Events.observe(vokzals, vokzals.Events.Fault, function (error) {
alert('Ошибка: ' + error);
});
 
 
YMaps.jQuery("#show_vokzals").toggle(function(){
map.addOverlay(vokzals);
YMaps.jQuery(this).css("font-weight","bold");
}, function(){
map.removeOverlay(vokzals);
YMaps.jQuery(this).css("font-weight","normal");
});     
 
 })
 
    </script> 
</head> 
 
<body> 
    <table border="0" cellspacing="5" cellpadding="5"> 
  <tr> 
    <td><div id="YMapsID" style="width:800px;height:600px"></div></td> 
    <td valign="top"> 
    <p><span id="show_kinoteatrs" class="link">Кинотеатры</span></p> 
    <p><span id="show_teatrs" class="link">Театры</span></p> 
    <p><span id="show_hotels" class="link">Гостиницы</span></p> 
    <p><span id="show_vokzals" class="link">Вокзалы и автостанции</span></p> 
</td> 
  </tr> 
  <tr> 
    <td colspan="2"><p><a href="/?p=255" title="API Яндекс.Карт Работаем с группой маркеров" target="_blank">Вернуться к тексту заметки</a></p></td> 
  </tr> 
</table> 
</body> 
 
</html>

Посмотреть пример в действии.

 

  • Гость: Подскажите, как можно прикрутить древовидное меню с группами объектов. А так же в раскрывающейся информации разместить HTML код и картинки? Данные хранить в XML и использовать стандартные яндекс стили .
  • Гость: ребят, как такое же можно повторить на гугле?
  • Гость: Да, очень хотелось бы узнать как можно "прикрутить" ссылки на группы объектов к динамическому выпадающему списку! Заранее благодарен!
  • Гость: Спасибо за пример! Очень помогло.
  • Гость: Просто сказка , пробую , пробую себе поставить !
  • Гость: подскажите плиз, как в описание меток вставить место надписей код ? (а именно нужна картинка и ссылка)
  • Гость: Доброго времени суток, подскажите пожалуйста, как например можно в "Гостиница ЧП Хажаев Р. Ж." изменить иконку на свою, а остальные иконки остались (т.е. изменить только несколько иконок, допустим в 2-3х кинотеатрах)?
  • Гость: Всем привет. Кто знает как сделать эти ссылки со своим стилем. Т.е. вынести их в html?
  • Гость: закрой тэг table в первых двух исходниках, а то я 2 часа голову ломал, чтож такой перекос в IE =)
  • Гость: http://realty.poiskmo.ru/index/0-2 Почему-то не работает. Не подскажите ошибку?
  • Гость: У Вас тут несколько ошибок: - строка 244 <script type="text/javascript" src="/script.js"></script> - вызывается не существующий скрипт; - строка 26 <link rel="stylesheet" type="text/css" href="/styles.css" /> - нет файла со стилями; Еще вы подключаете библиотеку jQuery в строке 239 <script type="text/javascript" src="http://s18.ucoz.net/src/jquery-1.7.2.js"></script>, она тоже может конфликтовать с API Яндекс.Карт, т.к. они используют у себя jQuery 1.3
  • Гость: Спасибо за ответ. Разобрался, все работает, как нужно. Переделал на новую версию.
  • Гость: Всем привет!Для начала хочу сказать, большое спасибо админу этого сайта, очень много раз помогали примеры с этого сайта. С яндекс картами работаю не давно, чуть подправил под себя этот пример. Сделал так что бы стиль меток можно было задавать отдельно, то есть не по группам, а каждой метке отдельно. Может не совсем красиво получилось. Вот пример: Изменил функцию // Создание метки function createPlacemark (point, name, description, st) { var placemark = new YMaps.Placemark(point, {style:st}); placemark.name = name; placemark.description = description; return placemark } И при создании группы добавился один параметр createPlacemark(new YMaps.GeoPoint(44.041596,56.321711), "Автостанция Сенная" , '' , "default#redSmallPoint" ) Так же можно добавить надпись на метки Добавив эту строку в функции createPlacemark placemark.setIconContent(name);
  • Гость: Вот бы еще и картинка хоть одна была...