dzenlife
4/12/2018 - 12:34 PM

Yandex maps Api

own icons, markers, events

$(function () {
    if ($("#mapContacts").length > 0)
    {
        ymaps.ready(function () {
            var map = new ymaps.Map("mapContacts", {
                center: [40.873556127486474, 50.649276543971425],
                zoom: 5,
                controls: ['zoomControl', 'typeSelector', 'fullscreenControl']
            });
            var iconSVG = {
                iconLayout: 'default#image',
                iconImageHref: '/local/templates/act/assets/images/ico/pin.svg',
                iconImageSize: [30, 41],
                iconImageOffset: [-15, -42]
            };
            map.behaviors.disable("scrollZoom");

            myCollection = new ymaps.GeoObjectCollection();
            $('.branch-row .branch-item').each(function () {
                var coords = $(this).data('coords').split(','),
                        address = $(this).data('address');

                placemark = new ymaps.Placemark(coords, {
                    balloonContent: address,
                }, iconSVG);

                myCollection.add(placemark);

                var $mapAddress = $(this).find('.mapAddress');
                $mapAddress.on('click', function (event) {
                    map.setCenter(coords, 18, {duration: 500});

                    if (event.originalEvent) {
                        $('html, body').animate({scrollTop: $('#mapContacts').offset().top}, 700);
                    }
                });
            });
            var $mainAddress = $('#mainAddress'),
                    coords = $mainAddress.data('coords').split(','),
                    address = $mainAddress.data('address');
            myCollection.add(new ymaps.Placemark(coords, {
                balloonContent: address
            }, iconSVG));
            myCollection.add(placemark);
            $mainAddress.on('click', function (event) {
                map.setCenter(coords, 18, {duration: 500});

                if (event.originalEvent) {
                    $('html, body').animate({scrollTop: $('#mapContacts').offset().top}, 700);
                }
            });

            map.geoObjects.add(myCollection);
            map.setBounds(myCollection.getBounds(), {checkZoomRange: true});
        });
    }
});