Behavior of the YandexMaps script with Ajax?

Question

JavaScript

After an Ajax request and replacing a part of the document, if the new content contained a YandexMaps script, I can’t understand what happens - the map “flies” to the upper left corner, while the mouse pointer seems to occupy the entire viewport.
I thought that the parent node did not have time to load, I set a timer to add the script. Did not help.

<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>

Here is the code that updates the page, another replacement option is commented out. The script is caught to add it later:

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');
                }

Example (on the page, click on "contacts")

I intercepted the script in the new content and added it after loading. I can't figure out why it doesn't work correctly.

Answer 1

This is how it works:

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

You don’t need to make a timer, but hang a callback on ymaps.ready
This is described in the documentation