Несколько точек Яндекс карты?

Question

[Alibek Kulseitov]

Задача состоит в том что должна быть яндекса карта с не ограниченным количеством точек и при клике должно выходить описание с адресом а так же кастомная метка. Я это все реализовал для одной точки с помощью этой статьи Ссылка 1

Метку кастомизировал, описание вывел по клику. Теперь проблема когда я пытаюсь добавлять множество точек то кастомная метка работает только на ту, что я сделал но описание не выходит у других. Это я пытался интегрировать с помощью этой статьи Ссылка 2

Мой Код для одной метки выглядит сейчас вот так:

ymaps.ready(init);
    var myMap;

    function init() {

        myMap = new ymaps.Map("YMapsID", {
            center: [43.238253, 76.945465], // Координаты объекта
            zoom: 13, // Маштаб карты
            controls: [] // Отключаем элементы управления.
        });

        // Добавим на карту ползунок масштаба и линейку.
        myMap.controls.add(
            new ymaps.control.ZoomControl()
        );

        // Отключаем zoom на скролле мыши
        myMap.behaviors.disable('scrollZoom');

        myPlacemark = new ymaps.Placemark([43.238253, 76.945465], { // Координаты метки объекта
            balloonContent: "<div class='ya-map'><div class='ya-map__city'>Алматы</div><div class='ya-map__title'>Название филиала</div><p>Богенбай батыра, 172 2 этаж, офис 72 вход с Желтоксан</p><p>[phone]<br>[phone]<br>[phone]</p></div>" // Надпись метки
        }, {
            iconLayout: 'default#image',

            // Своё изображение иконки метки
            iconImageHref: "%=static=%img/general/ic-map-marker.svg",

            // Размер мкетки
            iconImageSize: [40, 50],

            // Смещение левого верхнего угла иконки относительно
            // её "ножки" (точки привязки).
            iconImageOffset: [-20, -25]
        });

        myMap.geoObjects.add(myPlacemark);
        //myPlacemark.balloon.open();

    };

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

Вот демо с несколькими метками Тык

Comments

[freeExec]

где ваш не работающий код?

[Alibek Kulseitov]

freeExec, Да такой же просто из второй статьи вставил скрипт дополнительно

[Alibek Kulseitov]

freeExec, https://jsfiddle.net/0Ltvjr82/

[freeExec]

Alibek Kulseitov, А где у вас задаются кастомные части?

[Alibek Kulseitov]

freeExec, нет, у него там во втором варианте удаляется весь предыдущий код метки (в том числе его настройки метки и контента)

[freeExec]

Alibek Kulseitov, Ну раз удалили все настройки, чего же вы ожидаете тогда.

[Alibek Kulseitov]

freeExec, Ну так вот задал вопрос) как интегировать в текущий изначальный код )

[freeExec]

Alibek Kulseitov, Перенести в цикл полезный код, а не из статьи.

[Alibek Kulseitov]

freeExec, не совсем понял что Вы имеете ввиду что вопросе что на jsfiddle мой боевой код

Answer 1

[Антон Шаманов]

ymaps.ready(function () {
    var map = new ymaps.Map(
        'map-pickups', 
        {center: [55.75, 37.64], zoom: 10, controls: ['zoomControl', 'fullscreenControl']}, 
        {searchControlProvider: 'yandex#search'}
    );
    var objManager = new ymaps.ObjectManager({
        clusterize: true,
        gridSize: 32,
        clusterDisableClickZoom: true
    });
    objManager.objects.options.set('preset', 'islands#blueDotIcon');
    objManager.clusters.options.set('preset', 'islands#blueClusterIcons');
    map.geoObjects.add(objManager);
    
    var pickups = {
        type: 'FeatureCollection',
        features: []
    };
    var coordinates = [
        [55.831903, 37.411961],
        [55.763338, 37.565466],
        [55.763338, 37.565466],
        [55.744522, 37.616378],
        [55.780898, 37.642889],
        [55.793559, 37.435983],
        [55.800584, 37.675638],
        [55.716733, 37.589988],
        [55.691046, 37.711026],
        [55.723123, 37.406067],
        [55.843363, 37.778445]
    ];
    $.each(coordinates, function (id, coordinates) {
        pickups.features.push({
            type: 'Feature', 
            id: id, 
            geometry: {type: 'Point', coordinates: coordinates}, 
            properties: {
                balloonContentHeader: 'ПВЗ Grastin №' + id, 
                balloonContentBody: 'Адрес доставки, описание, контакты, время работы.', 
                balloonContentFooter: 'График работы: пн-сб 10:00-20:00', 
                clusterCaption: 'ПВЗ Grastin №' + id, 
                hintContent: 'ПВЗ Grastin №' + id
            }
        });
    });
    objManager.add(pickups);
    map.setBounds(map.geoObjects.getBounds());
});