谷歌地图在页面加载时加载，只显示地图框但不显示任何内容

Question

我正在尝试在Lat的基础上实施Google Map。和龙。我为此写了以下代码。

<script>
function geoFindMe() {
    function success(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;



        var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&sensor=false';

        $.ajax({
            url: url, dataType: "json", async: false, success: function (result) {
                if (result.results) {
                    $('[id$=txLocation]').val(result.results[0].address_components[7].long_name);
                }
            }
        });
        initMap(latitude, longitude);

    }

    function error() {
        var latLong;
        $.getJSON("https://ipinfo.io", function (ipinfo) {
            console.log("Found location [" + ipinfo.loc + "] by ipinfo.io");
            latLong = ipinfo.loc.split(",");


            var url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latLong[0] + ',' + latLong[1] + '&sensor=false';

            //  var URL1 = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + latitude + ',' + longitude + '&key=AIzaSyAcFUUXsJBxElbLTx4cNFTGFIsmwf5PlSo'
            $.ajax({
                url: url, dataType: "json", async: false, success: function (result) {
                    if (result.results) {
                        $('[id$=txLocation]').val(result.results[0].address_components[7].long_name);
                    }
                }
            });
            initMap(latLong[0], latLong[1]);
        });

    }
    navigator.geolocation.getCurrentPosition(success, error);
}
function initMap(Lat, lang) {
    var myLatlng = { lat: Lat, lng: lang };

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 17,
        center: myLatlng
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: 'Click to zoom'
    });

    map.addListener('center_changed', function () {
        // 3 seconds after the center of the map has changed, pan back to the
        // marker.
        window.setTimeout(function () {
            map.panTo(marker.getPosition());
        }, 3000);
    });

    marker.addListener('click', function () {
        map.setZoom(8);
        map.setCenter(marker.getPosition());
    });
}

正如下面的屏幕截图所示：

当我按F12时，它可以正常工作并显示实际的地图。

请帮帮我。并告诉我我做错了什么。

提前致谢。