inlined version

<div class="form-row field-location">
    <div>
        <label class="required" for="id_spot_set-0-location">Location:</label>
        <style type="text/css">
            #id_spot_set-0-location_map {
                width: 600px;
                height: 400px;
            }

            #id_spot_set-0-location_map .aligned label {
                float: inherit;
            }

            #id_spot_set-0-location_div_map {
                position: relative;
                vertical-align: top;
                float: left;
            }

            #id_spot_set-0-location {
                display: none;
            }
        </style>

        <div id="id_spot_set-0-location_div_map">
            <div id="id_spot_set-0-location_map">
                <div class="ol-viewport" data-view="3" style="position: relative; overflow: hidden; width: 100%; height: 100%; touch-action: none;"><canvas
                        class="ol-unselectable" width="1200" height="800" style="width: 100%; height: 100%; display: block;"></canvas>
                    <div class="ol-overlaycontainer"></div>
                    <div class="ol-overlaycontainer-stopevent">
                        <div class="ol-zoom ol-unselectable ol-control"><button class="ol-zoom-in" type="button" title="Zoom in">+</button><button
                                class="ol-zoom-out" type="button" title="Zoom out">−</button></div>
                        <div class="ol-rotate ol-unselectable ol-control ol-hidden"><button class="ol-rotate-reset"
                                type="button" title="Reset rotation"><span class="ol-compass" style="transform: rotate(0rad);">⇧</span></button></div>
                        <div class="ol-attribution ol-unselectable ol-control ol-collapsed">
                            <ul>
                                <li style=""><a href="https://openlayers.org/"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAA3NCSVQICAjb4U/gAAAACXBIWXMAAAHGAAABxgEXwfpGAAAAGXRFWHRTb2Z0d2FyZQB3d3cuaW5rc2NhcGUub3Jnm+48GgAAAhNQTFRF////AP//AICAgP//AFVVQECA////K1VVSbbbYL/fJ05idsTYJFtbbcjbJllmZszWWMTOIFhoHlNiZszTa9DdUcHNHlNlV8XRIVdiasrUHlZjIVZjaMnVH1RlIFRkH1RkH1ZlasvYasvXVsPQH1VkacnVa8vWIVZjIFRjVMPQa8rXIVVkXsXRsNveIFVkIFZlIVVj3eDeh6GmbMvXH1ZkIFRka8rWbMvXIFVkIFVjIFVkbMvWH1VjbMvWIFVlbcvWIFVla8vVIFVkbMvWbMvVH1VkbMvWIFVlbcvWIFVkbcvVbMvWjNPbIFVkU8LPwMzNIFVkbczWIFVkbsvWbMvXIFVkRnB8bcvW2+TkW8XRIFVkIlZlJVloJlpoKlxrLl9tMmJwOWd0Omh1RXF8TneCT3iDUHiDU8LPVMLPVcLPVcPQVsPPVsPQV8PQWMTQWsTQW8TQXMXSXsXRX4SNX8bSYMfTYcfTYsfTY8jUZcfSZsnUaIqTacrVasrVa8jTa8rWbI2VbMvWbcvWdJObdcvUdszUd8vVeJaee87Yfc3WgJyjhqGnitDYjaarldPZnrK2oNbborW5o9bbo9fbpLa6q9ndrL3ArtndscDDutzfu8fJwN7gwt7gxc/QyuHhy+HizeHi0NfX0+Pj19zb1+Tj2uXk29/e3uLg3+Lh3+bl4uXj4ufl4+fl5Ofl5ufl5ujm5+jmySDnBAAAAFp0Uk5TAAECAgMEBAYHCA0NDg4UGRogIiMmKSssLzU7PkJJT1JTVFliY2hrdHZ3foSFhYeJjY2QkpugqbG1tre5w8zQ09XY3uXn6+zx8vT09vf4+Pj5+fr6/P39/f3+gz7SsAAAAVVJREFUOMtjYKA7EBDnwCPLrObS1BRiLoJLnte6CQy8FLHLCzs2QUG4FjZ5GbcmBDDjxJBXDWxCBrb8aM4zbkIDzpLYnAcE9VXlJSWlZRU13koIeW57mGx5XjoMZEUqwxWYQaQbSzLSkYGfKFSe0QMsX5WbjgY0YS4MBplemI4BdGBW+DQ11eZiymfqQuXZIjqwyadPNoSZ4L+0FVM6e+oGI6g8a9iKNT3o8kVzNkzRg5lgl7p4wyRUL9Yt2jAxVh6mQCogae6GmflI8p0r13VFWTHBQ0rWPW7ahgWVcPm+9cuLoyy4kCJDzCm6d8PSFoh0zvQNC5OjDJhQopPPJqph1doJBUD5tnkbZiUEqaCnB3bTqLTFG1bPn71kw4b+GFdpLElKIzRxxgYgWNYc5SCENVHKeUaltHdXx0dZ8uBI1hJ2UUDgq82CM2MwKeibqAvSO7MCABq0wXEPiqWEAAAAAElFTkSuQmCC"></a></li>
                                <li>NASA Worldview</li>
                            </ul><button type="button" title="Attributions"><span>i</span></button>
                        </div>
                    </div>
                </div>
            </div>
            <span class="clear_features"><a href="javascript:geodjango_spot_set_0_location.clearFeatures()">Delete
                    all Features</a></span>

            <textarea id="id_spot_set-0-location" class="vSerializedField required" cols="150" rows="10" name="spot_set-0-location">{ "type": "Point", "coordinates": [ 11.265449523926, 11.272659301758001 ] }</textarea>
            <script type="text/javascript">
                var map_options = {};

                var base_layer = new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        attributions: "NASA Worldview",
                        maxZoom: 8,
                        url: "https://map1{a-c}.vis.earthdata.nasa.gov/wmts-webmerc/" +
                            "BlueMarble_ShadedRelief_Bathymetry/default/%7BTime%7D/" +
                            "GoogleMapsCompatible_Level8/{z}/{y}/{x}.jpg"
                    })
                });

                var options = {
                    base_layer: base_layer,
                    geom_name: 'Point',
                    id: 'id_spot_set-0-location',
                    map_id: 'id_spot_set-0-location_map',
                    map_options: map_options,
                    map_srid: 3857,
                    name: 'spot_set-0-location'
                };

                var geodjango_spot_set_0_location = new MapWidget(options);
            </script>
        </div>
    </div>
</div>