JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div class="main">
<div class="btn btn_shops-filter" data-ajax="http://verstka.ru.mitgroup.ru/shops_list.php">Найти</div>
<div class="shops__map">
  <div id="shops__map">
  </div>
  </div>
</div>

CSS

#shops__map{
  width: 700px;
  height: 700px;
}
.popover.top {
  margin-top: -10px;
}

JavaScript

/*Карта где купить*/
		  ymaps.ready(init);
		        var colcrd = [
		        				{
		        					"address": "улица Довженко, 1с1",
		        					"city": "Москва",
		        					"coord": [55.723491,37.51971],
		        					"country": "Россия",
		        					"id": 1
		        				},
		        				{
		        					"address": "Новокузнецкая улица, 25",
		        					"city": "Москва",
		        					"coord": [55.735642,37.632745],
		        					"country": "Россия",
		        					"id": 2
		        				}];
		      var crd2 = {
		        				colcrd
		        			};
		        			console.log(crd2);
		  function init() {
		    // Создание экземпляра карты
		    var myMap;
		    var myCollection;
		    var myPlacemark;
		    var mySearchControl;
		      ymaps.geolocation.get().then(function (res) {
		          var coords2 = res.geoObjects.position;
		          createMap({
		              center: [55.751574, 37.573856],
		              zoom: 12,
		              controls: []
		          });
		      }, function (e) {
		          // Если место положение невозможно получить, то просто создаем карту.
		          createMap({
		              center: [55.751574, 37.573856],
		              zoom: 12,
		              controls: []
		          });
		      });
		      function createMap (state) {
		        myMap = new ymaps.Map('shops__map', state);
		        	myMap.controls.add('zoomControl', {
		          float: 'left',
		          position: { 
		            top: 55, 
		            left: 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>',{
		          /*Строит экземпляр макета на основе шаблона и добавляет его в...