JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
              <button class="remove-search">Удалить поиск</button>
              <div class="shops__map">
							<div id="shops__map">

							</div>
						</div>

CSS

#shops__map{
  width: 700px;
  height: 700px;
}

JavaScript

ymaps.ready(init);
		  function init() {
		    // Создание экземпляра карты
		    var myMap;
		    var myCollection;
		    var myPlacemark;
		    var mySearchControl;
		      ymaps.geolocation.get().then(function (res) {
		          var coords2 = res.geoObjects.position;
		          createMap({
		              center: coords2,
		              zoom: 10,
		              controls: []
		          });
		      }, function (e) {
		          // Если место положение невозможно получить, то просто создаем карту.
		          createMap({
		              center: [55.751574, 37.573856],
		              zoom: 12,
		              controls: []
		          });
		      });
		      function createMap (state) {
		        myMap = new ymaps.Map('shops__map', state);
		        var mySearchControl = new ymaps.control.SearchControl({
			          options: {
			              noPlacemark: true
			          }
			      	});
			      myMap.controls.add(mySearchControl);
		        myMap.controls.add('zoomControl', {
		          float: 'left',
		          position: { 
		            top: 55, 
		            left: 10
		          }
		        });
		    		$('.remove-search').on('click',function(e){
		    				myMap.controls.remove('searchControl');
						    e.preventDefault();
						});
		      }
		  }