Поведение скрипта ЯндексКарты при Ajax?

Question

[lyubomirov]

После Ajax запроса и замене части документа, если в новом содержимом был скрипт ЯндексКарт, происходит не могу понять чего - карта "улетает" в левый верхний угол, при этом указатель мыши будто она занимает весь вьюпорт.
Думал, не успевает загрузится родительский узел, ставил таймер на добавление скрипта. Не помогло.

<div id="map-yandex">
<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A249b8467899ebba32cac0596945771de4b2aff3634dafa78bee70b68a9830e27&amp;width=100%25&amp;height=320&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

Вот код, обновляющий страницу, закомментирован другой вариант замены. Ловится скрипт, чтобы добавить его потом:

build_page: function (href) {

        var page_name = href.split('/').pop();
        var sym = page_name.indexOf('#');
        if (sym!=-1) {
            var page_anchor = page_name.substring(sym);
            page_name = page_name.substring(0, sym);
        }

        $.ajax({
            url: 'get_page' + '?' + page_name,
            type: 'GET',
            success: function(responseText){
                var jsonData = JSON.stringify(responseText);
                var inner = JSON.parse(jsonData );
                var incoming = $(inner[0]);

                try {
                    var incomingScript = incoming.find('script')[0];
                    var incomingParent = $(incomingScript).parent();
                    $(incomingScript).remove();
                } catch (err) {}

                var sec = $('section');
                sec.parent().append(incoming);
                sec.remove();
                // $('section').replaceWith(incoming).promise().done(function () {
                //     console.log(incomingScript);
                //     console.log(incomingParent);
                //     if (incomingScript && incomingParent) {
                //         incomingParent.append(incomingScript);
                //         console.log('append');
                //     }
                // });

                $('head style').remove();
                for (var k=2; k<inner.length; k++) {
                    $('head').append(inner[k])
                }

                console.log(incomingScript);
                console.log(incomingParent);
                if (incomingScript && incomingParent) {
                    setTimeout(function(){incomingParent.append(incomingScript)}, 2000);
                    console.log('append');
                }

Пример (на странице нажать на "контакты")

Перехватил скрипт в новом содержимом и добавил его после загрузки. Не могу понять, почему он выполняется некорректно.

Answer 1

[lyubomirov]

Вот так работает:

if ($('section div').is('#map-yandex')) {
    var script = document.createElement("script");
    script.src = "https://api-maps.yandex.ru/2.1/?lang=ru_RU";
    script.type = "text/javascript";
    script.onload = function () {
        // console.log('API Load');
        ymaps.ready(function () {
            // console.log('READY');
            myMap = new ymaps.Map("map-yandex", {
                center: [56.292608, 44.011411],
                zoom: 17.5
            });
            myPlacemark = new ymaps.Placemark([56.292608, 44.011411], {
                hintContent: 'Типография Артграфика',
                balloonContent: 'Типография Артграфика, Бекетова 37'
            },{
                iconColor: '#ef7f1a'
            });
            myMap.geoObjects.add(myPlacemark);
        })
    };
    document.getElementsByTagName("head")[0].appendChild(script);
}

Answer 2

[dom1n1k]

Нужно не таймер делать, а вешать колбек на ymaps.ready
В документации это описано

Comments

[lyubomirov]

if ($('section div').is('#map-yandex')) {
    ymaps.ready(function () {
        myMap = new ymaps.Map("map-yandex", {
            center: [55.76, 37.64],
            zoom: 10
        });
    })
}

Сделал так, карта все равно "улетает" в верхний левый угол, как будто не может найти куда ей вставиться.

[lyubomirov]

А можно обойтись вовсе без подключения API?
Как-то справиться с script, где src - конструктор