在加载一个页面加载我的传单Map是无法完全加载，而不是它显示了Map的一小部分.但当我尝试调整屏幕大小的Map完全显示作为一个整体.我不明白为什么我还没有初始化的Map正确的脚本.这是我的代码库在那里可能做错了.我已经添加了必要的传单js和CSS的cdn links

这是我的HTML

<div class="row" style="margin: 40px 5px;">
    <div class="col-lg-12">
        <div class="ms_heading">
            <h3 class="text-white p-2">properties Locations</h3>
        </div>
        <div id="map"
            style="height: 400px; margin-top:5px;">
        </div>
    </div>

这是我的剧本

$(document).ready(function () {

        //1. initialize leaflet map
        var center = [-0.421498116026705, 36.950147769312004];
        var propertiesmap = L.map('map').setView(center, 10);

        propertiesmap.invalidateSize();

        var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
            maxZoom: 10,
            subdomains:['mt0','mt1','mt2','mt3']
        });

        googleStreets.addTo(propertiesmap)

        var marker = L.marker([-0.421498116026705, 36.950147769312004]).addTo(propertiesmap);
                
    });