JSFiddle - React, Tailwind, and code Playground

by Arthur Shlain

HTML

<link rel="stylesheet" href="http://tmp4.primaidea.ru/css/bootstrap.min.css">
<script src="http://tmp4.primaidea.ru/js/vendor/jquery-1.11.1.min.js"></script>
<script src="http://tmp4.primaidea.ru/js/vendor/modernizr.custom.66014.js"></script>
<script src="http://tmp4.primaidea.ru/js/vendor/bootstrap.js"></script>
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="search-page-map map-block">

<div id="map" style="width: 100%; height: 650px" class="hidden-xs"></div>
    <div class="container-fluid">
        <div class="map-results">
            <div class="map-results-header">
                <h3>Результаты поиска:</h3>
            </div>
            <div class="map_results_scroll_div">
                <div class="map-results-scroll">
                                        <a href="/?c=2&p1=1800000&p2=1850000&r1=1&r2=5&id=275#resale" class="map-results-block" data-location="" data-id="275">
                        <span class="map-results-next-icon svgimg svgimg-circle"></span>
                        <span class="map_results-next-icon svgimg svgimg-right svgimg-primary"></span>
                                            <div class="map-results-block-img" style="background-image: url('http://tmp4.primaidea.ru/files/estates/images/thumbs/20141023061443-Мензелинского 9.jpg')"></div>
                        <div class="map-results-block-content">
                            <h5 class="map-results-block-caption">ул. Мензелинская, 9</h5>
                            <p class="gray map-results-block-description text-lowercase"><span>2-комн.</span>, Кировский район</p>
                            <p class="bold map-results-block-price">1 800 000 р.</p>
                        </div>
                    </a>
                                        <a href="/?c=2&p1=1800000&p2=1850000&r1=1&r2=5&id=318#resale" class="map-results-block" data-location="" data-id="318">
                        <span class="map-results-next-icon svgimg...

JavaScript

$(function(){
    var $map_manual_mode_search = $('.map-manual-mode-search');
    var map_manual_mode = false;

        var $map_scroll_div = $('.map-results-scroll');
    
    var myMap, myPlacemark = [], estate_coords, bounds;
    var useClusterer = true;

        ymaps.ready(function () {
        var base_coords         = [58.0103, 56.2342];
            var clusterIcons        = [{ href: 'http://tmp4.primaidea.ru/img/map_marker_cluster.png', size: [32, 32], offset: [-16, -28] }]; /* иконка кластеризатора */
        var clusterIconsActive  = [{ href: 'http://tmp4.primaidea.ru/img/map_marker_active.png',  size: [32, 32], offset: [-16, -28] }]; /* активная иконка кластеризатора */
        var $map_cluster_slider = $('.map-cluster-slider');

        var MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
            '<div class="popover top fade in popover-map-balloon">' +
                '<div class="arrow"></div>' +
                '<div class="popover-inner">' +
                '$[[options.contentLayout observeSize minWidth=294 maxWidth=294 maxHeight=370]]' +
                '</div>' +
                '</div>', {
                /**
                 * Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.
                 * @see  http://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/layout.templateBased.Base.xml#build
                 * @function
                 * @name  build
                 */
                build: function () {
                    this.constructor.superclass.build.call(this);
                    this._$element = $('.popover', this.getParentElement());
                    this.applyElementOffset();
                    this._$element.find('.close')
                        .on('click', $.proxy(this.onCloseClick, this));
                },
                /**
                 * Удаляет содержимое макета из DOM.
                 * @see ...