How to click on the map to get the location data in the input?

Question

Hello! There is a script from the Yandex.Maps sandbox, this one

And there is an input in which you need to display the name of the city (and even better the city and address) by clicking on the map:

<input type="text" name="address" id="address">

Question: how to make the conclusion of the address in the input when clicking on the map.

What exactly is the problem - in obtaining the address or in the output of the received address in the right field?
It does not coincide with the text of the question and in general is not about what the problem is.

Accepted Answer · 2018-07-10T15:02:29

 ymaps.ready(init); function init() { var myInput = document.getElementById("address"), myPlacemark, myMap = new ymaps.Map('map', { center: [55.753994, 37.622093], zoom: 9 }, { searchControlProvider: 'yandex#search' }); // Слушаем клик на карте. myMap.events.add('click', function (e) { var coords = e.get('coords'); // Если метка уже создана – просто передвигаем ее. if (myPlacemark) { myPlacemark.geometry.setCoordinates(coords); } // Если нет – создаем. else { myPlacemark = createPlacemark(coords); myMap.geoObjects.add(myPlacemark); // Слушаем событие окончания перетаскивания на метке. myPlacemark.events.add('dragend', function () { getAddress(myPlacemark.geometry.getCoordinates()); }); } getAddress(coords); }); // Создание метки. function createPlacemark(coords) { return new ymaps.Placemark(coords, { iconCaption: 'поиск...' }, { preset: 'islands#violetDotIconWithCaption', draggable: true }); } // Определяем адрес по координатам (обратное геокодирование). function getAddress(coords) { myPlacemark.properties.set('iconCaption', 'поиск...'); ymaps.geocode(coords).then(function (res) { var firstGeoObject = res.geoObjects.get(0), address = firstGeoObject.getAddressLine(); myPlacemark.properties .set({ // Формируем строку с данными об объекте. iconCaption: [ // Название населенного пункта или вышестоящее административно-территориальное образование. firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(), // Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания. firstGeoObject.getThoroughfare() || firstGeoObject.getPremise() ].filter(Boolean).join(', '), // В качестве контента балуна задаем строку с адресом объекта. balloonContent: address }); myInput.value = address; }); } }

 html, body { width: 100%; height: 95%; margin: 0; padding: 0; font-family: Arial; font-size: 14px; } #map { width: 100%; height: 95%; } #address { width: 80%; } .header { padding: 5px; }

 <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script> <p class="header">Кликните по карте, чтобы узнать адрес</p> <input type="text" name="address" id="address"> <div id="map"></div>

Well, I look at the cool "JS experts on StackOverflow" the opinion is different))), but religion itself probably does not allow the answer))))

How to click on the map to get the location data in the input?

1 answer 1

More articles: