Как правильно назначить ховер скриптом, чтобы после этого скрипт оставался рабочим?
Можно использовать функцию one(), которая вызывает одно и то же событие на одном и том же элементе единожды, что более очевидно, чем просто снятие обработчика внутри него.$(".map-show").one('mouseover', function() {
        var map = $(this).attr("data-map");
        var map_width = $(window).width();
        var map_height = $(this).attr("data-map-height");
        $(this).css("height", map_height);
        $(this).html(`<iframe src="${map}" width="${map_width}" style="border:0" allowfullscreen></iframe>`);
});
Метод .hover() в jQuery на самом деле вешает на элементе обработчики для двух событий: mouseenter и mouseleave.
Поэтому их можно отменить после первого срабатывания:$(this).off('mouseenter mouseleave');
В вашем случае это будет вот так:$(".map-show").hover(function () {
        var map = $(this).attr("data-map");
        var map_width = $(window).width();
        var map_height = $(this).attr("data-map-height");
        $(this).css("height", map_height);
        if (map_width > window) { map_width = window; }
        $(this).html('<iframe src="' + map + '" width="' + map_width + '" height="' + map_height + '" frameborder="0" style="border:0" allowfullscreen></iframe>');

        $(this).off('mouseenter mouseleave');
});