Thiết kế website giá rẻ

Question

Im getting some console errors seemingly from the google aps api, and my maps is not loading
picture of the maps modal

Ive tried changing versions and following what is suggested in the documentation but for some reason it just wont load, and the error is not giving me much information to go off of.

this same script used to work but it seems to suddenly throw errors. (TypeError: this.Xm is not iterable)

heres my javascript code

(function ($) {
    $(document).ready(function () {
        const PI = 3.14159265358979323846;
        const TERRESTRIAL_RADIUS = 6372797.56085;
        const RADIAN_DEGREES = PI / 180;
        let map;
        let marker;

        if (true)
        {
            $('#modalGoogleMap').modal('show');
        }
        originalLatLng = {
            lat: parseFloat($('#GoogleMaps_OriginalLat').val()),
            lng: parseFloat($('#GoogleMaps_OriginalLng').val())
        };

        newLatLng = {
            lat: parseFloat($('#GoogleMaps_NewLat').val()),
            lng: parseFloat($('#GoogleMaps_NewLng').val())
        };

        var apiString =
            $('#GoogleMaps_APIString').val()
            + "?v=" + $('#GoogleMaps_Version').val()
            + "&key=" + $('#GoogleMaps_Key').val() + "&callback=initMap";


        function markerUpdate(map) {
            marker.setMap(null);
            debugger
            newLatLng.lat = parseFloat(document.getElementById("latText").value);
            newLatLng.lng = parseFloat(document.getElementById("lngText").value);
            

            marker = new google.maps.Marker({
                position: newLatLng,
                map,
                title: 'Map Pin Updated: Manual Input',
                draggable: true
            });

            marker.setMap(map);

        }

        function addMarkerListener(map, marker) {
            map = new google.maps.event.addListener(marker, 'dragend', function (evt) {
                newLatLng.lat = evt.latLng.lat().toFixed(6);
                newLatLng.lng = evt.latLng.lng().toFixed(6);

                $('#lngText').val(newLatLng.lng);
                $('#latText').val(newLatLng.lat);
            });

        }

        function initMap() {
            map = new google.maps.Map(document.getElementById("map"), {
                center: originalLatLng,
                zoom: 18
            });

            marker = new google.maps.Marker({
                position: originalLatLng,
                map,
                title: 'Rooftop of Home to be Insured',
                draggable: true
            });
            addMarkerListener(map, marker);
            debugger

            $('#lngText').val(originalLatLng.lng)
            $('#latText').val(originalLatLng.lat)
            document.getElementById("latText").oninput = function () { markerUpdate(map) };
            document.getElementById("lngText").oninput = function () { markerUpdate(map) };


        }

        
        $('#modalGoogleMapClose').click(function () {

            GetNewLocation();
        });

        $('#modalGoogleMapCancel').click(function () {
            initMap();
        })

        $('#close').click(function () {
            initMap();
        })


        $("#GeoInformation").validate({
            submitHandler: function (form) {
                let isSuccess = GetNewLocation();
                if (isSuccess) {
                    form.submit();
                }
            },
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            onkeyup: false,
            onclick: false
        });
        function GetNewLocation() {
            
            distance = CalcGPSDistance(originalLatLng.lat, originalLatLng.lng, newLatLng.lat, newLatLng.lng);
            if ( distance > 45 ) {
                $('.modal-title').text("Pin is too far from the supplied address");
                marker.setMap(null);
                marker = new google.maps.Marker({
                    position: originalLatLng,
                    map: map,
                    title: 'Rooftop of Home to be Insured',
                    draggable: true
                });
                window.setTimeout(() => {
                    map.panTo(marker.getPosition());
                }, 600);
                window.setTimeout(() => {
                    map.setZoom(18);
                }, 600);
                addMarkerListener(map, marker);

                return false;
            }
            else {
                $('#GoogleMaps_NewLat').val(newLatLng.lat);
                $('#GoogleMaps_NewLng').val(newLatLng.lng);
                $('#modalGoogleMap').modal('hide');
                return true;
            }
        }

        function CalcGPSDistance(lat1, lng1, lat2, lng2)
        {
            let haversine;
            let temp;
            let pointDistance;

            lat1 = originalLatLng.lat * RADIAN_DEGREES;
            lng1 = originalLatLng.lng * RADIAN_DEGREES;
            lat2 = newLatLng.lat * RADIAN_DEGREES;
            lng2 = newLatLng.lng * RADIAN_DEGREES;

            haversine = (Math.sin((1.0 / 2) * (lat2 - lat1)) ** 2) + ((Math.cos(lat1)) * (Math.cos(lat2)) * (Math.sin((1.0 / 2) * (lng2 - lng1)) ** 2));
            temp = 2 * Math.asin(Math.min(1.0, Math.sqrt(haversine)));
            pointDistance = TERRESTRIAL_RADIUS * temp;
            pointDistance = pointDistance / 1609.344;

            return pointDistance;
        }

        // Create the script tag, set the appropriate attributes
        var script = document.createElement('script');
        script.src = apiString;
        script.async = true;

        // Attach your callback function to the `window` object
        window.initMap = function () {
            // JS API is loaded and available
            initMap();
        };

        // Append the 'script' element to 'head'
        document.head.appendChild(script);

    }); // End document ready
})(this.jQuery);

I have tried changing the version number, ive tried looking up and down the documentation but no solution.

the current version being used is 3.55 but ive tried quarterly stable and weekly as well as 3.57
I have tried to update to the newest version of what google maps suggests as an implementation as well

(function ($) {
    $(document).ready(function () {
        debugger;
        const PI = 3.14159265358979323846;
        const TERRESTRIAL_RADIUS = 6372797.56085;
        const RADIAN_DEGREES = PI / 180;
        let map;
        let marker;

        if (true) {
            $('#modalGoogleMap').modal('show');
        }
        originalLatLng = {
            lat: parseFloat($('#GoogleMaps_OriginalLat').val()),
            lng: parseFloat($('#GoogleMaps_OriginalLng').val())
        };

        newLatLng = {
            lat: parseFloat($('#GoogleMaps_NewLat').val()),
            lng: parseFloat($('#GoogleMaps_NewLng').val())
        };

        var apiString =
            $('#GoogleMaps_APIString').val()
            + "?v=3.57"
            + "&key=" + $('#GoogleMaps_Key').val() + "&callback=initMap";


        function markerUpdate(map) {
            marker.setMap(null);
            debugger
            newLatLng.lat = parseFloat(document.getElementById("latText").value);
            newLatLng.lng = parseFloat(document.getElementById("lngText").value);


            marker = new AdvancedMarkerElement({
                position: newLatLng,
                map,
                title: 'Map Pin Updated: Manual Input',
                gmpDraggable: true
            });

            marker.setMap(map);

        }

        function addMarkerListener(map, marker) {
            marker.addListener("dragend", (event) => {
                newLatLng.lat = evt.latLng.lat().toFixed(6);
                newLatLng.lng = evt.latLng.lng().toFixed(6);

                $('#lngText').val(newLatLng.lng);
                $('#latText').val(newLatLng.lat);
            });

        }
        console.log(document.getElementById("map"))
        window.initMap = async function () {
            debugger;
            console.log(document.getElementById("map"))
            console.log("Maps JavaScript API loaded.");

            // Request needed libraries.
            //@ts-ignore
            const { Map } = await google.maps.importLibrary("maps");
            const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

            // The map, centered at Uluru
            map = new Map(document.getElementById("map"), {
                zoom: 18,
                center: originalLatLng,
            });

            // The marker, positioned at Uluru
            const marker = new AdvancedMarkerElement({
                map: map,
                position: originalLatLng,
                title: "Rooftop of Home to be Insured",
                gmpDraggable: true
            });

            addMarkerListener(map, marker);
            debugger;

            $('#lngText').val(originalLatLng.lng)
            $('#latText').val(originalLatLng.lat)
            document.getElementById("latText").oninput = function () { markerUpdate(map) };
            document.getElementById("lngText").oninput = function () { markerUpdate(map) };
        }


        $('#modalGoogleMapClose').click(function () {

            GetNewLocation();
        });

        $('#modalGoogleMapCancel').click(function () {
            window.initMap();
        })

        $('#close').click(function () {
            window.initMap();
        })


        $("#GeoInformation").validate({
            submitHandler: function (form) {
                let isSuccess = GetNewLocation();
                if (isSuccess) {
                    form.submit();
                }
            },
            errorPlacement: function (error, element) {
                error.insertBefore(element);
            },
            onkeyup: false,
            onclick: false
        });
        function GetNewLocation() {
            distance = CalcGPSDistance(originalLatLng.lat, originalLatLng.lng, newLatLng.lat, newLatLng.lng);
            if (distance > 45) {
                $('.modal-title').text("Pin is too far from the supplied address");
                marker.setMap(null);
                marker = new AdvancedMarkerElement({
                    position: originalLatLng,
                    map: map,
                    title: 'Rooftop of Home to be Insured',
                    gmpDraggable: true
                });
                window.setTimeout(() => {
                    map.panTo(marker.getPosition());
                }, 600);
                window.setTimeout(() => {
                    map.setZoom(18);
                }, 600);
                addMarkerListener(map, marker);

                return false;
            }
            else {
                $('#GoogleMaps_NewLat').val(newLatLng.lat);
                $('#GoogleMaps_NewLng').val(newLatLng.lng);
                $('#modalGoogleMap').modal('hide');
                return true;
            }
        }
        function CalcGPSDistance(lat1, lng1, lat2, lng2) {
            let haversine;
            let temp;
            let pointDistance;

            lat1 = originalLatLng.lat * RADIAN_DEGREES;
            lng1 = originalLatLng.lng * RADIAN_DEGREES;
            lat2 = newLatLng.lat * RADIAN_DEGREES;
            lng2 = newLatLng.lng * RADIAN_DEGREES;

            haversine = (Math.sin((1.0 / 2) * (lat2 - lat1)) ** 2) + ((Math.cos(lat1)) * (Math.cos(lat2)) * (Math.sin((1.0 / 2) * (lng2 - lng1)) ** 2));
            temp = 2 * Math.asin(Math.min(1.0, Math.sqrt(haversine)));
            pointDistance = TERRESTRIAL_RADIUS * temp;
            pointDistance = pointDistance / 1609.344;

            return pointDistance;
        }

        // Create the script tag, set the appropriate attributes
        var script = document.createElement('script');
        script.src = apiString;
        //script.async = true;


        // Append the 'script' element to 'head'
        document.head.appendChild(script);

    }); // End document ready
})(this.jQuery);

Running that one gets me the same error as the original.

Thiết kế website giá rẻ

Danh mục

Google maps javascript API not loading, because of TypeError: this.Tm is not iterable