JSFiddle - React, Tailwind, and code Playground

by Руслан Абсалямов

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<input type="text" id="inputYandexMap">
<div id="map" style="width: 600px; height: 400px"></div>

JavaScript

let myMap,
    searchControl,
    myGeocoder,
    suggestView,
    myPlacemark;

ymaps.ready(init);

function init(){
	suggestView = new ymaps.SuggestView('inputYandexMap');
	myMap = new ymaps.Map ("map", {
            center: [55.82407, 49.05516],
            zoom: 17
        });
  
  searchControl = new ymaps.control.SearchControl({
    options: {
      float: 'left',
      floatIndex: 100,
      noPlacemark: true
    }
  });
  
  $('#inputYandexMap').on('change', function(){
    let value = $(this).val();
    console.log(value);
    searchControl.search('Казань, "'+value+"'").then(function () {
      let geoObjectsArray = searchControl.getResultsArray();
      if (geoObjectsArray.length) {
          console.log(geoObjectsArray[0].geometry.getCoordinates());
          let myCoords = geoObjectsArray[0].geometry.getCoordinates();
          myMap.geoObjects.add(
          new ymaps.Placemark(myCoords,
                  {iconContent: 'Место'},
                  {preset: 'islands#greenStretchyIcon'}
              )
          );
      	}
  	});
  });
}