Good morning to all,
I have a problem trying to embed a map in a custom Datatable editor. I have created a form and apply the template property: '#customForm' The map is built with the object:

            <div id="map_marker" class="map_marker"></div>
            <div class="mt-2 text-center " style="width: 100%;">
                Latitude: <b><span id="lat">0</span></b> -
                Longitude: <b><span id="lon">0</span></b><br>
                <i>click on map to change marker's position</i>
            </div>

And the javascript function:

    (function($) {
        var marker_pos, map_view, map;

        window.id_marker = 0;
        window.lon_marker = '0';
        window.lat_marker = '0';
   

        // Para ADD MARKER
        window.initialize_map_marker = function (lon,lat) {
            marker_pos = new ol.Feature({
                geometry: new ol.geom.Point(ol.proj.fromLonLat([lon,lat]))
            });
            marker_pos.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 12,
                    stroke: new ol.style.Stroke({
                        color: '#ffffff',
                        width: 3,
                    }),
                    fill: new ol.style.Fill({
                        color: '#f44336',
                        weight: 1
                    })
                })
            }));
            var vectorSource = new ol.source.Vector({
                features: [marker_pos]
            });

            var vectorLayer = new ol.layer.Vector({
                source: vectorSource
            });

            if(lat=='0') {
                var zoom = 1;
            } else {
                var zoom = 16;
            }

            map_view = new ol.View({
                center: ol.proj.fromLonLat([lon,lat]),
                zoom: zoom
            });
            map = new ol.Map({
                target: 'map_marker',
                controls : ol.control.defaults({
                    attribution : false,
                    zoom : false,
                }),
                layers: [
                    new ol.layer.Tile({
                        preload: Infinity,
                        source: new ol.source.TileJSON({
                            url: 'https://api.maptiler.com/maps/basic/tiles.json?key=OVZjfS5pSwpIb54ikvLw',
                            tileSize: 512,
                            crossOrigin: 'anonymous',
                            attributions: [],
                        })
                    })
                ,vectorLayer],
                view: map_view
            });
            map.on('click', function(evt){
                marker_pos.getGeometry().setCoordinates(evt.coordinate);
                var lat_lon = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
                window.lon_marker = parseFloat(lat_lon[0]).toFixed(6);
                window.lat_marker = parseFloat(lat_lon[1]).toFixed(6);
                $('#lon').html(window.lon_marker);
                $('#lat').html(window.lat_marker);
                $('#longitude_edit').val(window.lon_marker);
                $('#latitude_edit').val(window.lat_marker);
                window.marker_need_save = true;
            });
        };

        $(document).ready(function () {
            initialize_map_marker(window.lon_marker,window.lat_marker);
            $("#image_gallery").justifiedGallery({
                rowHeight: 100
            });
        });
    })(jQuery);

Outside of the editor, or just by removing its id, the map works fine. https://javierlasen.es/mapa/login/Admin/Marker/
The problem comes when it is inside the

<div id="customForm">

Thanks for the help