js api Yandex maps with fias (kladr)

by GunAlv

HTML

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

</head>

<body>

  <input type="text" name="address" placeholder="начните вводить адрес (например: Московская 112)">

<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>



<!-- fias -->
<script>
!function(t,e){function n(t){var e={},n={type:"contentType",name:"query",withParents:"withParent"};t.parentType&&t.parentId&&(e[t.parentType+"Id"]=t.parentId);for(var a in t)r(t,a)&&t[a]&&(e[r(n,a)?n[a]:a]=t[a]);return e}function r(t,e){return t.hasOwnProperty(e)}function a(t){var n=e.console;n&&n.error&&n.error(t)}t.fias={},function(){var e="https:";t.fias.url=e+"//kladr-api.ru/api.php",t.fias.timeout=3e3}();var i=[],o=function(){for(;i.length>5;){var t=i.shift();t.abort()}};t.fias.type={region:"region",district:"district",city:"city",street:"street",building:"building"},t.fias.typeCode={city:1,settlement:2,village:4},t.fias.validate=function(e){var n=t.fias.type;switch(e.type){case n.region:case n.district:case n.city:if(e.parentType&&!e.parentId)return a("parentId undefined"),!1;break;case n.street:if(e.parentType!=n.city&&e.parentType!=n.street)return a('parentType must equal "city" or "street"'),!1;if(!e.parentId)return a("parentId undefined"),!1;break;case n.building:if(!e.zip){if(!~t.inArray(e.parentType,[n.street,n.city]))return a('parentType must equal "street" or "city"'),!1;if(!e.parentId)return a("parentId undefined"),!1}break;default:if(!e.oneString)return a("type incorrect"),!1}return e.oneString&&e.parentType&&!e.parentId?(a("parentId undefined"),!1):e.typeCode&&e.type!=n.city?(a('type must equal "city"'),!1):!(e.limit<1)||(a("limit must greater than 0"),!1)},t.fias.api=function(e,r){if(!r)return void a("Callback undefined");if(!t.fias.validate(e))return void r([]);var...

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
}


/* fias */
.kladr-error{color:#cb3e27} #kladr_autocomplete ul{position:absolute;display:block;margin:0;padding:0;border:1px solid #e1e1e1;background-color:#fff;z-index:9999999999;overflow-x:hidden;overflow-y:auto;min-width:200px;max-height:420px;color:#222} #kladr_autocomplete li{display:list-item;list-style-type:none;margin:0;padding:8px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} #kladr_autocomplete li + li{border-top:1px solid #e1e1e1} #kladr_autocomplete li:hover{background-color:#f6f6f6;cursor:pointer} #kladr_autocomplete li.active{background-color:#f6f6f6} #kladr_autocomplete a{text-decoration:none} #kladr_autocomplete strong{color:#000} #kladr_autocomplete .spinner{position:absolute;display:block;margin:0;padding:0;width:16px;height:16px;z-index:9999999999;background:transparent url(/theme/img/spinner.png)center no-repeat}

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']
        }, {
            restrictMapArea: [
                [44.923846862033756, 38.57128893603515],
                [45.27399586598294, 39.515426509277326]
            ]
        });
        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(',...