---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/object_list.md
- https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/object_list.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt
# Вывод списка объектов карты
Open in CodeSandbox
Пример демонстрирует, как создать меню для отображения коллекций геообъектов карты.
Для построения такого меню необходимо создать два представления геообъекта: его API-представление (в виде метки на карте)
и его DOM-представление (то есть элемент меню).
Связать эти представления можно внутри обработчика события у DOM-представления (клик на пункте меню)
вызовом конкретных методов в API-представлении геообъекта (добавление/удаление метки с карты).
В этом примере меню строится на основе массива данных, который определен в файле groups.js.
Подробнее пример обсуждается в клубе.
{% list tabs %}
- index.html
```html
Вывод списка объектов карты
```
- groups.js
```js
// Группы объектов
var groups = [
{
name: "Известные памятники",
style: "islands#redIcon",
items: [
{
center: [50.426472, 30.563022],
name: "Монумент "Родина-Мать"",
},
{
center: [50.45351, 30.516489],
name: "Памятник "Богдану Хмельницкому"",
},
{
center: [50.454433, 30.529874],
name: "Арка Дружбы народов",
},
],
},
{
name: "Покушайки",
style: "islands#greenIcon",
items: [
{
center: [50.50955, 30.60791],
name: "Ресторан "Калинка-Малинка"",
},
{
center: [50.429083, 30.521708],
name: "Бар "Сало-бар"",
},
{
center: [50.450843, 30.498271],
name: "Абсент-бар "Палата №6"",
},
{
center: [50.454834, 30.516498],
name: "Ресторан "Спотыкач"",
},
],
},
{
name: "Оригинальные музейчики",
style: "islands#orangeIcon",
items: [
{
center: [50.443334, 30.520163],
name: "Музей грамзаписи и старинных музыкальных инструментов",
},
{
center: [50.446977, 30.505269],
name: "Музей истории медицины или Анатомический театр",
},
{
center: [50.452512, 30.530889],
name: "Музей воды. Водно-информационный центр",
},
],
},
{
name: "Красивости",
style: "islands#blueIcon",
items: [
{
center: [50.45987, 30.516174],
name: "Замок Ричарда-Львиное сердце",
},
{
center: [50.445049, 30.528598],
name: ""Дом с химерами"",
},
{
center: [50.449156, 30.511809],
name: "Дом Рыцаря",
},
],
},
];
```
- object_list.js
```js
ymaps.ready(init);
function init() {
// Создание экземпляра карты.
var myMap = new ymaps.Map(
"map",
{
center: [50.443705, 30.530946],
zoom: 14,
},
{
searchControlProvider: "yandex#search",
}
),
// Контейнер для меню.
menu = $('');
for (var i = 0, l = groups.length; i < l; i++) {
createMenuGroup(groups[i]);
}
function createMenuGroup(group) {
// Пункт меню.
var menuItem = $('' + group.name + ""),
// Коллекция для геообъектов группы.
collection = new ymaps.GeoObjectCollection(null, {
preset: group.style,
}),
// Контейнер для подменю.
submenu = $('');
// Добавляем коллекцию на карту.
myMap.geoObjects.add(collection);
// Добавляем подменю.
menuItem
.append(submenu)
// Добавляем пункт в меню.
.appendTo(menu)
// По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
.find("a")
.bind("click", function () {
if (collection.getParent()) {
myMap.geoObjects.remove(collection);
submenu.hide();
} else {
myMap.geoObjects.add(collection);
submenu.show();
}
});
for (var j = 0, m = group.items.length; j < m; j++) {
createSubMenu(group.items[j], collection, submenu);
}
}
function createSubMenu(item, collection, submenu) {
// Пункт подменю.
var submenuItem = $('' + item.name + ""),
// Создаем метку.
placemark = new ymaps.Placemark(item.center, {
balloonContent: item.name,
});
// Добавляем метку в коллекцию.
collection.add(placemark);
// Добавляем пункт в подменю.
submenuItem
.appendTo(submenu)
// При клике по пункту подменю открываем/закрываем баллун у метки.
.find("a")
.bind("click", function () {
if (!placemark.balloon.isOpen()) {
placemark.balloon.open();
} else {
placemark.balloon.close();
}
return false;
});
}
// Добавляем меню в тэг BODY.
menu.appendTo($("body"));
// Выставляем масштаб карты чтобы были видны все группы.
myMap.setBounds(myMap.geoObjects.getBounds());
}
```
{% endlist %}