How to make a search form outside Yandex maps?

M

mx9282021-02-09 01:57:32

JavaScript

mx928, 2021-02-09 01:57:32

Tell me how to add a search form outside the Yandex map?

The form itself is added using SuggestView . Can you tell me how to link this form to the map?
To display search results on the map.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
   
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
   
  <style>
        body, html {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }
        #map {
            width: 100%;
            height: 90%;
        }
    </style>
</head>

<body>

<input type="text" id="suggest"/>

Форма поиска за пределами карты 
<div id="map"></div>

</body>

</html>

var myMap;

ymaps.ready(init);

function init () {
    
    var suggestView = new ymaps.SuggestView('suggest');
    
    myMap = new ymaps.Map('map', {
       
        center: [55.76, 37.64], // Москва
        zoom: 10
    }, {
        searchControlProvider: 'yandex#search'
    });

}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

F

freeExec, 2021-02-09
@mx928

I didn't understand that at first. In SuggestView, you can specify a custom element for searching, as well as elements with hints. After the user has selected something, we receive an event with this text. We just have to geocode this hint.

suggestView.events.add('select', function (evt) {
        var q = evt.get('item').value;
        ymaps.geocode(q).then(
            function (result) {
                map.setCenter(result.geoObjects.get(0)#ну и там где-то координаты лежат);
            }
        );
    });