Witam serdecznie.
Mam mapkę w Open Street Maps: http://serwer1356363.home.pl/pub/test/mapa.html
Podgląd: https://ibb.co/x8mqR62


Mój kod wygląda następująco:

[HTML] pobierz, plaintext 
 
<script type="text/javascript">
 
            function onLocationFound(e) {
                var radius = e.accuracy / 2;
                lat = e.latlng.lat;
                lng = e.latlng.lng;
 
                L.marker(e.latlng).addTo(map).bindPopup("Tutaj jesteś!!!");
                //L.circle(e.latlng, radius).addTo(map);
 
                map.setView([lat, lng], 12);
            }
 
            function onLocationError(e) {
                //alert(e.message);
                console.log(e.message);
            }
 
 
            var map = L.map('mapdiv', {
                editable: true,
                fadeAnimation: false
            }).setView([54.35070881441067, 18.641191756395074], 12);
            L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            // L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors',
                maxZoom: 18, zoomControl: true, detectRetina: true
            }).addTo(map);
 
 
 
 
 
            let myFilter = ['grayscale:100%'];
 
            let myTileLayer = L.tileLayer.colorFilter('https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {
                attribution: '<a href="https://wikimediafoundation.org/wiki/Maps_Terms_of_Use">Wikimedia</a>',
                filter: myFilter,
            }).addTo(map);
 
 
            // lc = L.control.locate({
            //     strings: {
            //         title: "Pokaż gdzie jestem"
            //     }
            // }).addTo(map);
 
 
            var LeafIcon = L.Icon.extend({
                options: {
                    iconSize: [25, 29],
                    iconAnchor: [25, 29],
                    popupAnchor: [-12, -22]
                }
            });
 
 
            L.icon = function (options) {
                return new L.Icon(options);
            };
 
 
            var icons = {
                greenIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon19.png')}}'}),
                redIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'}),
                blackIcon: new LeafIcon({iconUrl: '{{asset('assets/images/ikon20.png')}}'})
            }
 
 
            var image = '';
            $.ajax({
                url: '{{url('/getPointForMap')}}',
                method: 'get',
                cache: false,
                success: function (data) {
                    $.each(JSON.parse(data), function(i, poi) {
                        if (poi.photo != ''){
                            image = '<img src="'+poi.photo+'" class="mapImgF"><br/>';
                        }
                        L.marker([poi.lat, poi.lng], {icon: icons[poi.marker]}).addTo(map).addTo(map).bindPopup('<a href="'+poi.url+'">' + image + '<div class="mapTitleF">' + poi.name + '</div>' + '<div class="mapDescF"> ocena: ' + poi.score + '<br/>' + poi.price + ' </div></a>', {maxWidth: "auto", closeOnClick: true});
                    });
                }
            });
 
            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);
            map.locate({setView: true, maxZoom: 18});
 
        </script>
 
        <style type="text/css">
            #mapdiv {
                height: 600px;
                width:100%;
            }
 
        </style>
[HTML] pobierz, plaintext 

W jaki sposób można naprawić to szare tło?

Gdy nawet lekko sie zmieni obszar przegladarki to mapa sie "naprawia". Wyglada wiec to na to, ze na poczatku ma zle wymiary.

Sprobuj moze przeniesc o to
<style type="text/css">
#mapdiv {
height: 600px;
width:100%;
}

</style>

przed tworzeniem mapy a nie po