How to add a search form for Yandex maps?

D

DeniSidorenko2020-12-30 09:34:13

Yandex maps

DeniSidorenko, 2020-12-30 09:34:13

The question is
Added a Yandex map through the iframe
How to add a search for it at the top (which is in the original)

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

DENIS Kokorev, 2020-12-30
@shmaroder

Why through an iframe?
Here is a map with a search https://tech.yandex.ru/maps/jsbox/2.1/search_contr...

function init() {
    var myMap = new ymaps.Map('map', {
        center: [55.74, 37.58],
        zoom: 13,
        controls: []
    });
    
    // Создадим экземпляр элемента управления «поиск по карте»
    // с установленной опцией провайдера данных для поиска по организациям.
    var searchControl = new ymaps.control.SearchControl({
        options: {
            provider: 'yandex#search'
        }
    });
    
    myMap.controls.add(searchControl);
    
    // Программно выполним поиск определённых кафе в текущей
    // прямоугольной области карты.
    searchControl.search('Шоколадница');
}

ymaps.ready(init);

<!DOCTYPE html>
<html>
<head>
    <title>Поиск организаций и геопоиск</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
    <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>" type="text/javascript"></script>
    <script src="search_control_ppo.js" type="text/javascript"></script>
  <style>
        html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
    </style>
</head>
<body>
<div id="map"></div>
</body>
</html>