map yandex

by AJIEKCEU

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
							<div class="shops__filter-result">
								<div class="filter-result">
									<div class="filter-result__item">
										<div class="number-shop">1</div>
										<div class="shop-address">Москва, м. Дмитровская, ул. Новодмитровская, 5А</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">2</div>
										<div class="shop-address">Вятская улица, 47с25</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">3</div>
										<div class="shop-address">улица Малая Дмитровка, 16с5</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">4</div>
										<div class="shop-address">Смоленская набережная, 2к2</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">5</div>
										<div class="shop-address">улица Генерала Дорохова, 16с42</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">6</div>
										<div class="shop-address">Верейская улица, 29с137</div>
									</div>
									<div class="filter-result__item">
										<div class="number-shop">7</div>
										<div class="shop-address">Шарикоподшипниковская улица, 26</div>
									</div>
								</div>
							</div>
              <div class="shops__map">
							<div id="shops__map">

							</div>
						</div>

CSS

#shops__map{
  width: 700px;
  height: 700px;
}
.popover.top {
  margin-top: -10px;
}
.popover{
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  max-width: 276px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.popover-title{
  background-color: #000;
  text-align: center;
  padding: 15px 5px;
}
.popover-content{
  text-align: center;
  padding: 15px 5px;
}
.popover .arrow, .popover .arrow:after{
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.popover.top .arrow{
  bottom: -11px;
  left: 50%;
  margin-left: -11px;
  border-top-color: #999;
  border-top-color: rgba(0,0,0,0.25);
  border-bottom-width: 0;

}
.popover .arrow{
  border-width: 11px;
}
.popover.top .arrow:after{
  bottom: 1px;
  margin-left: -10px;
  border-top-color: #fff;
  border-bottom-width: 0;
}
.popover .arrow:after{
  border-width: 10px;
  content: "";
}
.popover .close{
  position: absolute;
  right: 5px;
  top: 1px;
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 20px;
  color: #cfcfcf;
}

JavaScript

ymaps.ready(init);
			function init() {
	      // Создание экземпляра карты
	      myMap = new ymaps.Map('shops__map', {
	          // При инициализации карты обязательно нужно указать
	          // её центр и коэффициент масштабирования.
	          center: [55.751574, 37.573856], // Москва
	          zoom: 10
	      });
	      var MyBalloonLayout = ymaps.templateLayoutFactory.createClass(
	      		'<div class="popover top">'+
	          '<a class="close" href="#">&times;</a>'+
	          '<div class="arrow"></div>'+
	          '<div class="popover-inner">'+
	          '$[[options.contentLayout observeSize minWidth=235 maxWidth=235 maxHeight=350]]'+
	          '</div>'+
	          '</div>',{
		          /*Строит экземпляр макета на основе шаблона и добавляет его в родительский HTML-элемент.*/
		          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.*/
		          clear: function () {
		            this._$element.find('.close').off('click');
		            this.constructor.superclass.clear.call(this);
		          }, 
		          onSublayoutSizeChange: function () {
	                  MyBalloonLayout.superclass.onSublayoutSizeChange.apply(this, arguments);

	                  if(!this._isElement(this._$element)) {
	                      return;
	                  }

	                  this.applyElementOffset();

	                  this.events.fire('shapechange');
	            },
		          /*Сдвигаем балун, чтобы "хвостик" указывал на точку привязки.*/
		          applyElementOffset: function () {
		            this._$element.css({
		                left: -(this._$element[0].offsetWidth / 2),
		                top: -(this._$element[0].offsetHeight +...