Проблема с отображением элементов навигации на карте Яндекс

Question

Добрый день при вставке карты на сайт, не отображается навигация. Нет ни кнопки поиска ни слоев и т.д

<html>
  <head>
    Быстрый старт. Размещение интерактивной карты на странице
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://api-maps.yandex.ru/v3/?apikey=15e99496-b7d0-4b36-aa53-f94c136665b4&lang=ru_RU"></script>
<script>
        initMap();

        async function initMap() {
            await ymaps3.ready;

            const {YMap, YMapDefaultSchemeLayer} = ymaps3;

            const map = new YMap(
                document.getElementById('map'),
                {
                    location: {
                        center: [37.588144, 55.733842],
                        zoom: 10
                    }
                }
            );

            map.addChild(new YMapDefaultSchemeLayer());
        }
    </script>
    </head>
    <body>
   <div id="map" style="width: 100%; height: 400px"></div>
    </body>
</html>

Answer 1

В 3 версии API не все элементы реализованы из коробки.

Кнопки геолокации и масштабирования

<script>
        initMap();

        async function initMap() {
            await ymaps3.ready;

            const {YMap, YMapDefaultSchemeLayer, YMapControls, YMapDefaultFeaturesLayer} = ymaps3;

            const {
                YMapZoomControl,
                YMapGeolocationControl
            } = await ymaps3.import('@yandex/[email protected]');

            const map = new YMap(
                document.getElementById('map'),
                {
                    location: {
                        center: [37.588144, 55.733842],
                        zoom: 10
                    }
                }
            );

            map.addChild(new YMapDefaultSchemeLayer());
            map.addChild(new YMapDefaultFeaturesLayer());

            map.addChild(new YMapControls({
                position: 'right'
            }).addChild(new YMapZoomControl({

            })));

            map.addChild(new YMapControls({
                position: 'top right'
            }).addChild(new YMapGeolocationControl({

            })));
        }
    </script>

Поиск реализуется свои решением (https://yandex.ru/dev/jsapi30/doc/ru/ref/#search), к примеру, добавление своего input

<input type="text" id="search">

var textInput = document.getElementById("search");

textInput.addEventListener("keydown", function(event) {
    if(event.keyCode == 13){

        ymaps3.search({
            'text': textInput.value
        }).then(function (res) {
            console.log(res[0])
        })

    }
});

Доступные элементы тут - https://yandex.ru/dev/jsapi30/doc/ru/object/controls/

Все остальные кнопки и действия в этой версии пока нужно реализовывать своими силами. В документации все по js api всё есть, хоть и не так понятно.

БЛОГ НА HUSL

Проблема с отображением элементов навигации на карте Яндекс

Ответы (1 шт):