Map

by alexeilavrov

HTML

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script src="https://fonts.googleapis.com/css?family=PT+Sans"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div class="container">

<h1>Добавление нового объявления</h1>

<p><div class="form-inline"><input type="text" id="searchLine" class="form-control w-50 mr-1" data-provide="typeahead"> <button type="submit" id="searchSubmit" class="btn btn-primary">Показать на карте</button></div></p>

<p><div id="map" style="width: 100%; height: 400px"></div></p>

<p id="addressFull">Полный адрес</p>

<table>
<tr>
	<td>Координаты:</td>
    <td id="addressCoordinates"></td>
</tr>
<tr>
	<td>Область:</td>
    <td id="addressRegion"></td>
</tr>
<tr>
	<td>Город:</td>
    <td id="addressCity"></td>
</tr>
<tr>
	<td>Район:</td>
    <td id="addressDistrict"></td>
</tr>
<tr>
	<td>Микрорайон:</td>
    <td id="addressMcrDistrict"></td>
</tr>
<tr>
	<td>Улица:</td>
    <td id="addressStreet"></td>
</tr>
<tr>
	<td>Дом:</td>
    <td id="addressHouse"></td>
</tr>
</table>



</div>

CSS

body {font-family:'PT Sans', sans-serif;}

JavaScript

function init(){

var myPlacemark, metkaCoord, 
suggestView = new ymaps.SuggestView('searchLine', {boundedBy: [[58.29, 57.47], [56.24, 64.54]]}),
myMap = new ymaps.Map('map', {
	center: [56.83, 60.60],
	zoom: 9
});
var myRoute;
var searchCollection = new ymaps.GeoObjectCollection({}, {preset: "islands#circleIcon"});

myMap.controls.remove('searchControl');
myMap.controls.remove('trafficControl');
myMap.controls.remove('typeSelector');
myMap.controls.remove('rulerControl');


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#redDotIconWithCaption',
		draggable: true
	});
}

// Определяем адрес по координатам (обратное геокодирование).
function getAddress(coords) {
	myPlacemark.properties.set('iconCaption', 'поиск...');
	ymaps.geocode(coords).then(function (res) {
		var firstGeoObject = res.geoObjects.get(0);

		myPlacemark.properties
			.set({
				// Формируем строку с данными об объекте.
				iconCaption: [
					// Название населенного пункта или вышестоящее административно-территориальное образование.
					firstGeoObject.getLocalities().length ? firstGeoObject.getLocalities() : firstGeoObject.getAdministrativeAreas(),
					// Получаем путь до топонима, если метод вернул null, запрашиваем наименование здания.
					firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
				].filter(Boolean).join(', '),
				// В качестве контента балуна задаем строку с адресом...