js api Yandex maps

by GunAlv

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <input type="text" name="address" id="suggest" value="краснодар, московская 140А">

<div id="mapAddress"></div>



<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=54cee6d9-1f89-456f-890f-b913318037bf" type="text/javascript"></script>
</body>

</html>

CSS

#mapAddress {
  width:500px;
  height:300px;
  border:1px solid red;
}

input{width:500px;
height:40px;
border:2px solid red;
font-size:16px;
box-sizing:border-box;
padding-left:20px;
outline:0
}

JavaScript

window.onload = function() {
    if ($('#mapAddress').length > 0) {

        ymaps.ready(init);

        // end if length
    }

    function init() {
        var myPlacemark;
        
        var myMap = new ymaps.Map('mapAddress', {
            center: [45.06549697591071,38.986598531198304],
            zoom: 14,
            controls: ['zoomControl', 'geolocationControl', 'fullscreenControl']
        });
        myMap.behaviors.disable('scrollZoom');

        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);
                $(document).find('#address').val(firstGeoObject.getAddressLine());
                myPlacemark.properties.set({
                    iconCaption: [
                        firstGeoObject.getAdministrativeAreas(),
                        firstGeoObject.getThoroughfare() || firstGeoObject.getPremise()
                    ].filter(Boolean).join(', '),
                    balloonContent: firstGeoObject.getAddressLine()
                });
            });
        }
        
        const getPlaceBySuggestView...