javascript - This page can't load Google Maps properly

Question

I'm trying to get the latitude and longitude from a map but I get this error:

This page can't load Google Maps properly.

I am not sure what causes this error. Do I need to add a key or it it just an error in my code?

Any help is appreciated.

My Code

<script type="text/javascript">

    $("#selectLocation").hide();
    $(document).on("click",".setSelectLocation",function() {
        $(".setSelectLocation").hide();
        $("#selectLocation").show();
    });

    $("#area_id option").hide();
    $("#area_id option[data-parent=" + $('#country').val() + "]").show();
    $(document).on("change","#country",function() {
        var value = $(this).val();
        $("#area_id").show();
        $("#area_id option").hide();
        $('#area_id').prepend('<option disabled selected value="#">???? ????????</option>');
        $("#area_id option[data-parent=" + value + "]").show();
    });

    function initialize() {
        var e = new google.maps.LatLng(24.701925,46.675415), t = {
            zoom: 5,
            center: e,
            panControl: !0,
            scrollwheel: 1,
            scaleControl: !0,
            overviewMapControl: !0,
            overviewMapControlOptions: {opened: !0},
            mapTypeId: google.maps.MapTypeId.terrain
        };
        map = new google.maps.Map(document.getElementById("latlongmap"), t)
        geocoder = new google.maps.Geocoder
        marker = new google.maps.Marker({
            position: e,
            map: map
        })
        map.streetViewControl = false
        infowindow = new google.maps.InfoWindow({
            content: "(24.701925,46.675415))"
        })
        google.maps.event.addListener(map, "click", function (e) {
            marker.setPosition(e.latLng);
            var t = e.latLng
            o = "(" + t.lat().toFixed(6) + ", " + t.lng().toFixed(6) + ")";
            infowindow.setContent(o),
            document.getElementById("lat").value = t.lat().toFixed(6),
            document.getElementById("lng").value = t.lng().toFixed(6)
        })
    }

</script>
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&language=ar&callback=initialize"></script>

Answer 1

For anyone who encounters the "This page can't load Google Maps properly" error when loading a Google map that is watermarked with a "for development purposes only" message:

The error in question is this one: https://developers.google.com/maps/faq#api-key-billing-errors

In order to use Google Maps Platform products, billing must be enabled on your account, and all requests must include a valid API key.

Hope this helps.