JSFiddle - React, Tailwind, and code Playground

by Oleg Khobotov

HTML

<div class="js-map" data-coord="[54.7789,31.9991]" data-zoom="12" data-mapid="1" style="height: 500px;"></div>
                                                                <script>
                                                                 mapPoints = [
                                                                            {
                                                                                "address": "4-я Загорная улица, 27",
                                                                                "coords": [54.8192,32.1283],
                                                                                "id": 1
                                                                            },
                                                                            {
                                                                                "address": "7-й Краснофлотский переулок, 3",
                                                                                "coords": [54.7863, 32.0023],
                                                                                "id": 2
                                                                            },
                                                                            {
                                                                                "address": "площадь Победы, 1",
                                                                                "coords": [54.7778,32.0532],
                                                                                "id": 3
                                                                            },
                                                                            {
                                                                                "address": "улица Валентины Гризодубовой, 2",
                                                                                "coords": [54.8100, 32.0271],
   ...

JavaScript

// Показываем карту
    $(document).on('click', '.js-open-plan-map', function() {
        var plan = $('.js-plan-map'),
            triggers = $('.js-open-plan-map'),
            wrapper = $('.plan__wrapper'),
            offsetY = plan.offset().top;
        triggers.toggleClass('is-opened');
        plan.toggleClass('is-opened');
        wrapper.toggleClass('is-opened');

        if (plan.hasClass('is-opened')) {

            // Меняем сетку
            $('.js-grid-transform').css('width', '100%');
            // Удаляем ненужный спейсер (генерится плагином фиксации элемента при скролле)
            $('.js-scroll-fix-spacer').remove();

            // Если на странице есть превьюшка плана, то скроллим к плану
              if ($('.plan__map-preview').length) {
              // и страница проскроллена больше чем топ плана и
//            if (window.pageYOffset > offsetY) {
                $('html, body').animate({ scrollTop: offsetY - 10 }, 400);
//            }
              }
            // Если это страница каталога, скроллим к карте (мгновенно);
            if ($('.map').length) {
                // и страница проскроллена больше чем топ плана
                offsetY = plan.offset().top;
                if (window.pageYOffset > offsetY) {
                    // Скроллим к карте
                    $('html, body').animate({scrollTop: offsetY}, 0);
                }
                // Удаляем отрицательный отступ слева у списка планировок
                $('.layouts-list--margin').css('margin-left', '0');
                // И ставим для заголовка секции с планировками
                $('.layouts-section__header').css('margin-left', '15px');
            }
        } else {
            // Удаляем все вспомогательные стайлы
            $('.js-grid-transform, .layouts-list--margin, .layouts-section__header').removeAttr('style');
        }

        // Триггерим пересчет скролла
        plan.trigger('sticky_kit:recalc');
    });

    // Яндекс карты
    //...