Яндекс карта с управлением для сайта

23 мая 2020 JavaScript

Создать карту в конструкторе Яндекс карт наверное самый простой и быстрый способ, когда надо добавить местоположение на сайте. Но если нужно сделать карту с внешними элементами управления, то конструктора здесь окажется мало. Самый распространенный пример, когда есть несколько офисов компании, и при нажатии ссылки «Показать на карте», карта автоматически перестраивается и показывает адрес нужного офиса. В этой статье мы рассмотрим готовый пример реализации этого функционала. Итак, давайте приступим!

Подключение скриптов

Геокодер API Яндекс.Карт

Для начала необходимо подключить скрипт API Яндекс карт и наш скрипт для работы с картой (код скрипта main-map.js будет рассмотрен далее):

HTML-код

Добавляем для примера 3 ссылки «Показать на карте». Это будут ссылки на различные точки на карте. Далее контейнер для карты . Еще я добавил стиль для этого блока, чтобы он растянулся по ширине.

Показать на карте
Показать на карте
Показать на карте


        #map {
                width: 100%; height: 400px; padding: 0; margin: 0;
        }

JavaScript-код

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.742932093456126,37.62389544445802],
            zoom: 16,
            controls: []
        }),

        myGeoObject = new ymaps.GeoObject({


        });

    var address1 = new ymaps.Placemark([55.742932093456126,37.62389544445802], {
        balloonContent: 'Точка 1',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    var address2 = new ymaps.Placemark([55.791055862396824,37.52825102327829], {
        balloonContent: 'Точка 2',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    var address3 = new ymaps.Placemark([55.82726918688044,37.637157631026405], {
        balloonContent: 'Точка 3',
    }, {
        preset: 'islands#dotIcon',
        iconColor: '#D13F22'
    });

    myMap.geoObjects
        .add(myGeoObject)
        .add(address1)
        .add(address2)
        .add(address3);


    var mapControls = $('.map-control');
    var destinations = {
        '#address1': address1,
        '#address2': address2,
        '#address3': address3
    };
    mapControls.each(function(item, i) {
                
                // Прокрутка к блоку с картой и переход к точке
        $(this).bind('click', function() {
                var position = $('#map').offset().top;
                window.scrollTo(0, position);
                var destination = destinations[$(this).attr('href')];
                myMap.panTo(destination.geometry.getCoordinates(), {
                    flying: true,
                    duration: 3000
                })
                return false;
            }
        );
    });
}

В коде мы указываем точки с координатами и в конце обработчик, который при нажатии на ссылку плавно пролистывает карту к нужной точке. Кстати координаты точек вы можете получить в Геокодере API Яндекс.Карт.