[Шпаргалка/Примеры] Яндекс.Карты (Yandex Maps API)

01.12.2017 / codd

На многих сайтах организаций зачастую на странице с контактной информацией требуется вставить карту с меткой/метками для заданного адреса.

Документация по JS API | Песочница

Содержание:

1. Как вставить карту с меткой для одного заданного адреса

В секции head подключаем загрузчик компонентов api яндекс.карт:

<head>
   <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
</head>

<head>

</head>

На странице создаем контейнер для карты :

<div id="map" style="width: 600px; height: 400px"></div>

1	<div id="map" style="width: 600px; height: 400px"></div>

И добавляем скрипт:

<script>
ymaps.ready(init);

function init(){

    // Строка с адресом, который нужно геокодировать
    var address = 'Москва, ул. Льва Толстого, 16';

    // Ищем координаты указанного адреса
    var geocoder = ymaps.geocode(address);

    // После того, как поиск вернул результат, вызывается callback-функция
    geocoder.then(
        function (res) {

            // координаты объекта
            var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

            // Создаем карту
            var map = new ymaps.Map("map", {
                center: coordinates, // центр карты - координаты найденного объекта
                zoom: 15, // коэффициент масштабирования

                // элементы управления картой
                // список элементов можно посмотреть на этой странице
                // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/
                controls: [
                    'typeSelector', // переключатель отображаемого типа карты
                    'zoomControl' // ползунок масштаба
                ]
            });

            // Добавление метки (Placemark) на карту
            // Подробнее про метки здесь https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/
            map.geoObjects.add(new ymaps.Placemark(
                coordinates, // коодирнаты метки

                // объект с данными метки
                // подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/#param-properties
                {
                    'hintContent': address, // всплывающая подсказка (выводим адрес объекта)
                    'balloonContent': 'Время работы: Пн-Пт, с 9 до 20' // содержимое балуна (выводим время работы)
                },
                // объект с настройками метки
                // подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/#param-options
                {
                    // стиль метки (выводим красную метку с точкой в центре)
                    // варианты стилей https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/
                    'preset': 'islands#redDotIcon'
                }

            ));
        }
    );
}
</script>

ymaps.ready(init);

function init(){

// Строка с адресом, который нужно геокодировать

var address = 'Москва, ул. Льва Толстого, 16';

// Ищем координаты указанного адреса

var geocoder = ymaps.geocode(address);

// После того, как поиск вернул результат, вызывается callback-функция

geocoder.then(

function (res) {

// координаты объекта

var coordinates = res.geoObjects.get(0).geometry.getCoordinates();

// Создаем карту

var map = new ymaps.Map("map", {

center: coordinates, // центр карты - координаты найденного объекта

zoom: 15, // коэффициент масштабирования

// элементы управления картой

// список элементов можно посмотреть на этой странице

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/

controls: [

'typeSelector', // переключатель отображаемого типа карты

'zoomControl' // ползунок масштаба

]

});

// Добавление метки (Placemark) на карту

// Подробнее про метки здесь https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/

map.geoObjects.add(new ymaps.Placemark(

coordinates, // коодирнаты метки

// объект с данными метки

// подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/#param-properties

{

'hintContent': address, // всплывающая подсказка (выводим адрес объекта)

'balloonContent': 'Время работы: Пн-Пт, с 9 до 20' // содержимое балуна (выводим время работы)

// объект с настройками метки

// подробнее https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/Placemark-docpage/#param-options

{

// стиль метки (выводим красную метку с точкой в центре)

// варианты стилей https://tech.yandex.ru/maps/doc/jsapi/2.1/ref/reference/option.presetStorage-docpage/

'preset': 'islands#redDotIcon'

}

));

}

);

}

</script>

Демо:

<br /> Ваш браузер не поддерживает плавающие фреймы!<br />

2. Как вставить карту с метками для нескольких заданных адресов

<script>
ymaps.ready(init);

function init(){

    // Создаем карту
    var map = new ymaps.Map("map", {
        center: [55, 37], // координаты центра карты, при загрузке
        zoom: 5  // коэффициент масштабирования
    });

    // Добавляем в геокодер список адресов
    var objects = ymaps.geoQuery(
        ymaps.geocode('Москва, Слесарный переулок, д.3'))
        .add(ymaps.geocode('Люберцы, Октябрьский проспект д.143'))
        .add(ymaps.geocode('Москва, ул. Льва Толстого, 16'))
        .addToMap(map);

    // Создаем коллекцию геообъектов, в котором будут находиться эти адреса
    var geoObjectsCollection = new ymaps.GeoObjectCollection();

    // После того, как поиск вернул результат, вызывается callback-функция
    objects.then(function () {

        // добавляем координаты адресов в коллекцию geoObjectsCollection
        objects.each(function (object) {

            var coordinates = object.geometry.getCoordinates();
            geoObjectsCollection.add( new ymaps.Placemark(coordinates) );

        });

        // Добавляем коллекцию геообъектов на карту
        map.geoObjects.add(geoObjectsCollection);

        // Спозиционируем карту так, чтобы на ней были видны все объекты.
        map.setBounds(geoObjectsCollection.getBounds());
    });

}
</script>

ymaps.ready(init);

function init(){

// Создаем карту

var map = new ymaps.Map("map", {

center: [55, 37], // координаты центра карты, при загрузке

zoom: 5 // коэффициент масштабирования

});

// Добавляем в геокодер список адресов

var objects = ymaps.geoQuery(

ymaps.geocode('Москва, Слесарный переулок, д.3'))

.add(ymaps.geocode('Люберцы, Октябрьский проспект д.143'))

.add(ymaps.geocode('Москва, ул. Льва Толстого, 16'))

.addToMap(map);

// Создаем коллекцию геообъектов, в котором будут находиться эти адреса

var geoObjectsCollection = new ymaps.GeoObjectCollection();

// После того, как поиск вернул результат, вызывается callback-функция

objects.then(function () {

// добавляем координаты адресов в коллекцию geoObjectsCollection

objects.each(function (object) {

var coordinates = object.geometry.getCoordinates();

geoObjectsCollection.add( new ymaps.Placemark(coordinates) );

});

// Добавляем коллекцию геообъектов на карту

map.geoObjects.add(geoObjectsCollection);

// Спозиционируем карту так, чтобы на ней были видны все объекты.

map.setBounds(geoObjectsCollection.getBounds());

});

}

</script>

Демо:

<br /> Ваш браузер не поддерживает плавающие фреймы!<br />

3. Масштабирование карты так, чтобы было видно все объекты

Если на карте немного объектов, и необходимо масштабировать карту так, чтобы отображались все объекты в активной области, обычно используется такой код:

map.setBounds(myCollection.getBounds(), {checkZoomRange:true});
// или
map.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true});

map.setBounds(myCollection.getBounds(), {checkZoomRange:true});

// или

map.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true});

Но, если на карте находится всего 1 объект, то карта масштабируется до максимума. Чтобы решить эту проблему, можно использовать такой код:

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){ 
    if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
});

myMap.setBounds(myMap.geoObjects.getBounds(), {checkZoomRange:true}).then(function(){

if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.

});

4. Как вставить карту с меткой для заданных координат и добавить свой балун и хинт

<script>
    // Параметры метки
    var placemarkConfig = {
        'coordinates': [52.25041003, 104.35442012], // Координаты метки

        // Данные, которые будут использоваться при выводе балуна
        'name': 'Жукова,5\\3',
        'desc': 'В этой статье предлагаю на примере простого массива рассмотреть как именно работают внутренние интерфейсы Traversable и ArrayAccess.',
        'photo': 'ex4_1.png'
    };

    ymaps.ready(init);

    function init(){

        // Создаем карту
        var map = new ymaps.Map("map", {
            center: [52.25041003, 104.35442012], // координаты центра карты, при загрузке
            zoom: 15,  // коэффициент масштабирования
            // элементы управления картой
            // список элементов можно посмотреть на этой странице
            // https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/
            controls: [
                'zoomControl' // ползунок масштаба
            ]
        });

        // Создаем метку
        var placemark = new ymaps.Placemark(placemarkConfig.coordinates, {
            // всплывающая подсказка (выводим адрес объекта)
            hintContent: placemarkConfig.name,
            // Содержимое балуна
            balloonContent: '<img src="' + placemarkConfig.photo + '"> <br/> <strong>' + placemarkConfig.name + '</strong> <br/> ' + placemarkConfig.desc
        });

        // Добавляем метку на карту
        map.geoObjects.add(placemark);

    }
</script>

// Параметры метки

var placemarkConfig = {

'coordinates': [52.25041003, 104.35442012], // Координаты метки

// Данные, которые будут использоваться при выводе балуна

'name': 'Жукова,5\\3',

'desc': 'В этой статье предлагаю на примере простого массива рассмотреть как именно работают внутренние интерфейсы Traversable и ArrayAccess.',

'photo': 'ex4_1.png'

};

ymaps.ready(init);

function init(){

// Создаем карту

var map = new ymaps.Map("map", {

center: [52.25041003, 104.35442012], // координаты центра карты, при загрузке

zoom: 15, // коэффициент масштабирования

// элементы управления картой

// список элементов можно посмотреть на этой странице

// https://tech.yandex.ru/maps/doc/jsapi/2.1/dg/concepts/controls-docpage/

controls: [

'zoomControl' // ползунок масштаба

]

});

// Создаем метку

var placemark = new ymaps.Placemark(placemarkConfig.coordinates, {

// всплывающая подсказка (выводим адрес объекта)

hintContent: placemarkConfig.name,

// Содержимое балуна

balloonContent: '<img src="' + placemarkConfig.photo + '"> <br/> <strong>' + placemarkConfig.name + '</strong> <br/> ' + placemarkConfig.desc

});

// Добавляем метку на карту

map.geoObjects.add(placemark);

}

</script>

Демо:

<br /> Ваш браузер не поддерживает плавающие фреймы!<br />

5. Переключение разных коллекций меток на одной карте

Пример: У вас есть база с магазинами в разных городах. Необходимо вывести выпадающий список с городами и магазинами в этих городах.
При переключении города список магазинов и метки на карте должны изменяться на элементы из выбранного города.

HTML:

<div id="cityShop">
    <label for="city">Город</label>: <select name="city" id="city"></select>
    <ul id="shops"></ul>
</div>

<div id="map" style="width: 600px; height: 400px"></div>

<label for="city">Город</label>: <select name="city" id="city"></select>

</div>

JS:

<script>
    var map;
    var placemarkCollection;
    var placemarkList = {};

    // Список городов и магазинов в них
    var shopList = [
        {
            'city_name': 'Москва',
            'shops': [
                {
                    'coordinates': [55.72532368326033, 37.748675112058876],
                    'name': 'Рязанский проспект, 6Ас21'
                },
                {
                    'coordinates': [55.701677873469, 37.57358050756649],
                    'name': 'Ленинский проспект, 47с2'
                }
            ]
        },
        {
            'city_name': 'Санкт-Петербург',
            'shops': [
                {
                    'coordinates': [59.863210042666125, 30.37903938671841],
                    'name': 'Будапештская улица, 36к2'
                },
                {
                    'coordinates': [59.99486277158917, 30.406505207030918],
                    'name': 'проспект Непокорённых'
                }
            ]
        }
    ];

    ymaps.ready(init);

    /**
     * Вывод меток магазинов из указанного города на карте
     * @param cityId
     */
    function showShopListFromCity(cityId)
    {
        $('#shops').html('');
        placemarkCollection.removeAll();

        for (var c = 0; c < shopList[cityId].shops.length; c++) {
            var li = '<li data-city-id="' + cityId + '" data-shop-id="' + c + '">' + shopList[cityId].shops[c].name + '</li>';
            $('#shops').append(li);

            if (placemarkList[cityId] === undefined) placemarkList[cityId] = {};

            placemarkList[cityId][c] = new ymaps.Placemark(
                shopList[cityId].shops[c].coordinates,
                {
                    hintContent: shopList[cityId].shops[c].name,
                    balloonContent: shopList[cityId].shops[c].name
                }
            );

            placemarkCollection.add(placemarkList[cityId][c]);
        }

        map.geoObjects.add(placemarkCollection);
        map.setBounds(placemarkCollection.getBounds(), {checkZoomRange:true});
    }

    // Переключение города
    $(document).on('change', $('select#city'), function() {
        showShopListFromCity( $('select#city option:selected').attr('data-city-id') );
    });

    // Клик на адрес
    $(document).on('click', '#shops li', function() {
        var cityId = $(this).attr('data-city-id');
        var shopId = $(this).attr('data-shop-id');

        placemarkList[cityId][shopId].events.fire('click');
    });

    function init(){

        // Создаем карту
        map = new ymaps.Map("map", {
            center: [52.25041003, 104.35442012], // координаты центра карты, при загрузке
            zoom: 15,
            controls: [
                'zoomControl'
            ]
        });

        placemarkCollection = new ymaps.GeoObjectCollection();

        // Добавление городов в выпадающий список при загрузке карты
        for (var i = 0; i < shopList.length; i++) {
            var option = '<option data-city-id="' + i + '">' + shopList[i].city_name + '</option>';
            $('select#city').append(option);
        }

        $('select#city').trigger('change');
    }
</script>

100

101

102

var map;

var placemarkCollection;

var placemarkList = {};

// Список городов и магазинов в них

var shopList = [

{

'city_name': 'Москва',

'shops': [

{

'coordinates': [55.72532368326033, 37.748675112058876],

'name': 'Рязанский проспект, 6Ас21'

{

'coordinates': [55.701677873469, 37.57358050756649],

'name': 'Ленинский проспект, 47с2'

}

]

{

'city_name': 'Санкт-Петербург',

'shops': [

{

'coordinates': [59.863210042666125, 30.37903938671841],

'name': 'Будапештская улица, 36к2'

{

'coordinates': [59.99486277158917, 30.406505207030918],

'name': 'проспект Непокорённых'

}

]

}

];

ymaps.ready(init);

/**

* Вывод меток магазинов из указанного города на карте

* @param cityId

function showShopListFromCity(cityId)

{

$('#shops').html('');

placemarkCollection.removeAll();

for (var c = 0; c < shopList[cityId].shops.length; c++) {

var li = '<li data-city-id="' + cityId + '" data-shop-id="' + c + '">' + shopList[cityId].shops[c].name + '</li>';

$('#shops').append(li);

if (placemarkList[cityId] === undefined) placemarkList[cityId] = {};

placemarkList[cityId][c] = new ymaps.Placemark(

shopList[cityId].shops[c].coordinates,

{

hintContent: shopList[cityId].shops[c].name,

balloonContent: shopList[cityId].shops[c].name

}

);

placemarkCollection.add(placemarkList[cityId][c]);

}

map.geoObjects.add(placemarkCollection);

map.setBounds(placemarkCollection.getBounds(), {checkZoomRange:true});

}

// Переключение города

$(document).on('change', $('select#city'), function() {

showShopListFromCity( $('select#city option:selected').attr('data-city-id') );

});

// Клик на адрес

$(document).on('click', '#shops li', function() {

var cityId = $(this).attr('data-city-id');

var shopId = $(this).attr('data-shop-id');

placemarkList[cityId][shopId].events.fire('click');

});

function init(){

// Создаем карту

map = new ymaps.Map("map", {

center: [52.25041003, 104.35442012], // координаты центра карты, при загрузке

zoom: 15,

controls: [

'zoomControl'

]

});

placemarkCollection = new ymaps.GeoObjectCollection();

// Добавление городов в выпадающий список при загрузке карты

for (var i = 0; i < shopList.length; i++) {

var option = '<option data-city-id="' + i + '">' + shopList[i].city_name + '</option>';

$('select#city').append(option);

}

$('select#city').trigger('change');

}

</script>

Демо:

<br /> Ваш браузер не поддерживает плавающие фреймы!<br />

6. Работа с геокодером и автодополнение адресов

По умолчанию маркер стоит в Москве. При перемещении маркера с помощью геокодера определяются его координаты, адрес и информация о ближайшем метро.
При изменении адреса в форме автоматически меняется расположение маркера.

HTML:

<form action="" method="post">
    <div>
        <label for="address">Адрес</label>
        <input type="text" name="address" id="address" value="Россия, Москва">
    </div>
    <div>
        <label for="coordinates">Координаты</label>
        <input type="text" name="coordinates" id="coordinates" readonly>
    </div>

    <div id="row-metro">
        <label for="metro">Метро</label>
        <input type="text" name="metro" id="metro">

        <label for="metro-times">До метро, мин.</label>
        <input type="text" name="metro-times" id="metro-times">

        <select name="metro-type" id="metro-type">
            <option>пешком</option>
            <option>транспортом</option>
        </select>
    </div>

    <div id="map" style="width: 500px; height: 400px;"></div>
</form>

<div>

<label for="address">Адрес</label>

</div>

<div>

<label for="coordinates">Координаты</label>

</div>

<label for="metro">Метро</label>

<label for="metro-times">До метро, мин.</label>

<option>пешком</option>

<option>транспортом</option>

</select>

</div>

</form>

JS:

<script>
    jQuery(document).ready(function($) {

        var country = 'Россия';

        $.ui.autocomplete.filter = function (array, term) {
            var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");
            return $.grep(array, function (value) {
                return matcher.test(value.label || value.value || value);
            });
        };

        var myMap, myPlacemark, metroList = [];

        ymaps.ready(function() {
            updatePlacemarkPosition()
        });

        // Реагируем на изменение адреса в поле input[id=address]
        $(document).on('change', '#address', function() {
            updatePlacemarkPosition();
        });

        // Добавляем автодополнение адресов
        $('#address').autocomplete({
            source: function( request, response ) {

                var address = $('#address').val().trim(),
                    searchAddress = country + ', ' + address,
                    autocompleteData = [];


                ymaps.suggest(searchAddress, {results: 20}).then(function (items) {

                    for (var i in items) {
                        var item = items[i].value.replace(new RegExp(country + ',\s*', 'i'), '').trim();

                        var autocompleteItem = {
                            id: item,
                            label: item,
                            value: item
                        };

                        autocompleteData.push(autocompleteItem);
                    }

                    response(autocompleteData);
                });

            },
            minLength: 1,
            select: function() {
                $('#address').trigger('change');
            }

        });

        $(document).on('change', '#metro', function() {
            var metro = $(this).val().trim();
            if (array_search(metro, metroList) == false) {
                $(this).val('');
            }
        });

        function updatePlacemarkPosition() {
            var address = $('#address').val().trim(),
                searchAddress = country + ', ' + address;

            ymaps.geocode(searchAddress).then(
                function (res) {

                    var firstGeoObject = res.geoObjects.get(0),
                        coordinates = firstGeoObject.geometry.getCoordinates(),
                        bounds = firstGeoObject.properties.get('boundedBy');

                    if (!myMap) {
                        myMap = new ymaps.Map('map', {
                            center: coordinates,
                            zoom: 10,
                            controls: ['zoomControl']
                        });
                    }

                    if (!myPlacemark) {
                        myPlacemark = new ymaps.Placemark(coordinates, {}, {draggable: true});
                        myMap.geoObjects.add(myPlacemark);

                        myPlacemark.events.add('dragend', function (e) {
                            var country = $('#country option:selected').text().trim(),
                                placemarkCoordinates = e.get('target').geometry.getCoordinates();

                            $('#coordinates').val('[' + placemarkCoordinates[0] + ', ' + placemarkCoordinates[1] + ']');

                            ymaps.geocode(placemarkCoordinates)
                                .then(function(resAddress) {
                                    var firstAddress = resAddress.geoObjects.get(0),
                                        firstAddressText = firstAddress.properties.get('text').replace(new RegExp(country + ',\s*', 'i'), '').trim();

                                    $('#address').val(firstAddressText);
                                });

                            searchMetro(placemarkCoordinates);
                        });

                    } else {
                        myPlacemark.geometry.setCoordinates(coordinates);
                    }

                    myMap.setBounds(bounds, {
                        checkZoomRange: true
                    });

                    $('#coordinates').val('[' + coordinates[0] + ', ' + coordinates[1] + ']');

                    searchMetro(coordinates);
                }
            );
        }

        function searchMetro(coordinates)
        {
            // Проверяем, имеется ли метро в данном населенном пункте
            var metroGeocoder = ymaps.geocode(coordinates, {results: 200, kind: 'metro'});
            metroGeocoder.then(
                function (resMetro) {

                    $('#metro').val('');

                    var firstMetro = resMetro.geoObjects.get(0);

                    if (firstMetro == undefined) {
                        $('#row-metro').hide();
                    } else {
                        $('#row-metro').show();

                        $('#metro').val(firstMetro.properties.get('name').replace(new RegExp('метро\s*', 'i'), '').trim());

                        var autocompleteData = [];

                        resMetro.geoObjects.each(function (obj) {
                            var item = obj.properties.get('name').replace(new RegExp('метро\s*', 'i'), '').trim();

                            autocompleteData.push(item);
                        });

                        array_unique(autocompleteData);
                        metroList = autocompleteData;

                        $('#metro').autocomplete({
                            source: function(request, response) {
                                var results = $.ui.autocomplete.filter(autocompleteData, request.term);
                                response(results.slice(0, 10));
                            }
                        });
                    }

                    // Время до ближайшего метро
                    ymaps.route([coordinates, firstMetro.geometry.getCoordinates()])
                        .then(function(route) {
                            var firstPath = route.getPaths().get(0),
                                firstPathTime = (firstPath.getTime() / 60).toFixed();

                            $('#metro-times').val(firstPathTime);
                            $('#metro-type option:eq(1)').prop('selected', true);
                        });

                }
            );
        }
    });

    function array_unique( array ) {	// Removes duplicate values from an array
        //
        // +   original by: Carlos R. L. Rodrigues

        var p, i, j;
        for(i = array.length; i;){
            for(p = --i; p > 0;){
                if(array[i] === array[--p]){
                    for(j = p; --p && array[i] === array[p];);
                    i -= array.splice(p + 1, j - p).length;
                }
            }
        }

        return true;
    }

    function array_search( needle, haystack, strict ) {	// Searches the array for a given value and returns the corresponding key if
        // successful
        //
        // +   original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

        var strict = !!strict;

        for(var key in haystack){
            if( (strict && haystack[key] === needle) || (!strict && haystack[key] == needle) ){
                return key;
            }
        }

        return false;
    }
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

jQuery(document).ready(function($) {

var country = 'Россия';

$.ui.autocomplete.filter = function (array, term) {

var matcher = new RegExp("^" + $.ui.autocomplete.escapeRegex(term), "i");

return $.grep(array, function (value) {

return matcher.test(value.label || value.value || value);

});

};

var myMap, myPlacemark, metroList = [];

ymaps.ready(function() {

updatePlacemarkPosition()

});

// Реагируем на изменение адреса в поле input[id=address]

$(document).on('change', '#address', function() {

updatePlacemarkPosition();

});

// Добавляем автодополнение адресов

$('#address').autocomplete({

source: function( request, response ) {

var address = $('#address').val().trim(),

searchAddress = country + ', ' + address,

autocompleteData = [];

ymaps.suggest(searchAddress, {results: 20}).then(function (items) {

for (var i in items) {

var item = items[i].value.replace(new RegExp(country + ',\s*', 'i'), '').trim();

var autocompleteItem = {

id: item,

label: item,

value: item

};

autocompleteData.push(autocompleteItem);

}

response(autocompleteData);

});

minLength: 1,

select: function() {

$('#address').trigger('change');

}

});

$(document).on('change', '#metro', function() {

var metro = $(this).val().trim();

if (array_search(metro, metroList) == false) {

$(this).val('');

}

});

function updatePlacemarkPosition() {

var address = $('#address').val().trim(),

searchAddress = country + ', ' + address;

ymaps.geocode(searchAddress).then(

function (res) {

var firstGeoObject = res.geoObjects.get(0),

coordinates = firstGeoObject.geometry.getCoordinates(),

bounds = firstGeoObject.properties.get('boundedBy');

if (!myMap) {

myMap = new ymaps.Map('map', {

center: coordinates,

zoom: 10,

controls: ['zoomControl']

});

}

if (!myPlacemark) {

myPlacemark = new ymaps.Placemark(coordinates, {}, {draggable: true});

myMap.geoObjects.add(myPlacemark);

myPlacemark.events.add('dragend', function (e) {

var country = $('#country option:selected').text().trim(),

placemarkCoordinates = e.get('target').geometry.getCoordinates();

$('#coordinates').val('[' + placemarkCoordinates[0] + ', ' + placemarkCoordinates[1] + ']');

ymaps.geocode(placemarkCoordinates)

.then(function(resAddress) {

var firstAddress = resAddress.geoObjects.get(0),

firstAddressText = firstAddress.properties.get('text').replace(new RegExp(country + ',\s*', 'i'), '').trim();

$('#address').val(firstAddressText);

});

searchMetro(placemarkCoordinates);

});

} else {

myPlacemark.geometry.setCoordinates(coordinates);

}

myMap.setBounds(bounds, {

checkZoomRange: true

});

$('#coordinates').val('[' + coordinates[0] + ', ' + coordinates[1] + ']');

searchMetro(coordinates);

}

);

}

function searchMetro(coordinates)

{

// Проверяем, имеется ли метро в данном населенном пункте

var metroGeocoder = ymaps.geocode(coordinates, {results: 200, kind: 'metro'});

metroGeocoder.then(

function (resMetro) {

$('#metro').val('');

var firstMetro = resMetro.geoObjects.get(0);

if (firstMetro == undefined) {

$('#row-metro').hide();

} else {

$('#row-metro').show();

$('#metro').val(firstMetro.properties.get('name').replace(new RegExp('метро\s*', 'i'), '').trim());

var autocompleteData = [];

resMetro.geoObjects.each(function (obj) {

var item = obj.properties.get('name').replace(new RegExp('метро\s*', 'i'), '').trim();

autocompleteData.push(item);

});

array_unique(autocompleteData);

metroList = autocompleteData;

$('#metro').autocomplete({

source: function(request, response) {

var results = $.ui.autocomplete.filter(autocompleteData, request.term);

response(results.slice(0, 10));

}

});

}

// Время до ближайшего метро

ymaps.route([coordinates, firstMetro.geometry.getCoordinates()])

.then(function(route) {

var firstPath = route.getPaths().get(0),

firstPathTime = (firstPath.getTime() / 60).toFixed();

$('#metro-times').val(firstPathTime);

$('#metro-type option:eq(1)').prop('selected', true);

});

}

);

}

});

function array_unique( array ) { // Removes duplicate values from an array

// + original by: Carlos R. L. Rodrigues

var p, i, j;

for(i = array.length; i;){

for(p = --i; p > 0;){

if(array[i] === array[--p]){

for(j = p; --p && array[i] === array[p];);

i -= array.splice(p + 1, j - p).length;

}

return true;

}

function array_search( needle, haystack, strict ) { // Searches the array for a given value and returns the corresponding key if

// successful

// + original by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)

var strict = !!strict;

for(var key in haystack){

if( (strict && haystack[key] === needle) || (!strict && haystack[key] == needle) ){

return key;

}

return false;

}

</script>

Демо:

<br /> Ваш браузер не поддерживает плавающие фреймы!<br />

Замечание: Если требуется сделать поле с автодополнением и подсказками адреса для России, удобнее всего пользоваться API сервиса DaData.

#js#яндекс.карты api