Good Afternoon,

I'm building a laravel project where i need to use the google places API to get data on input.

I've setted up everything as follow :

<script type="text/javascript"
src="https://maps.google.com/maps/api/js?key={{env('GOOGLE_MAPS_API_KEY')}}&libraries=places">
</script>
<script>
    $( document ).ready(function() {
        google.maps.event.addDomListener(window, 'load', initialize);
    
        function initialize() {
            var input = document.getElementById('property_address');
            var autocomplete = new google.maps.places.Autocomplete(input);
    
            autocomplete.setComponentRestrictions({
                   country:"it",
               });
    
            autocomplete.addListener('place_changed', function () {
                var place = autocomplete.getPlace();
                $('#latitude').val(place.geometry['location'].lat());
                $('#longitude').val(place.geometry['location'].lng());
                $('#city').val(place.address_components['1'].long_name)
                $('#country').val(place.address_components['5'].long_name)
                $('#province').val(place.address_components['4'].short_name)
                $('#zip_code').val(place.address_components['6'].short_name)

                console.log(place)
            });
        }
    });
</script>

In my .env

GOOGLE_MAPS_API_KEY= MY_API_KEY

And everything was just working fine as needed.Suddenly, everything stopped working and I'm getting the following errors in my console :

Console errors

I have read all the docs at the links provided from the error, but everything seems to be well configured, the billing for the project is enabled and the keys are enabled too. I have even tried to cancel and create a new project but i still get the same issue.

I have tried to google the errors but it seem i can't find a solution to it.

Do you have any ideas on why I'm getting these errors?I'm just getting crazy since one day.

Thank you

CodePudding user response：

As is clear from the console log report env : {{env('GOOGLE_MAPS_API_KEY')}}

return the empty value, so to ensure the codes are working correctly, use api key as hard code indeed, instead use {{env('GOOGLE_MAPS_API_KEY')}} write your api key directly for example:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=AJodAWJDoajd&libraries=places"></script>

if everything worked properly problem in {{env()}} and you have to solve the problem