Google autocomplete doesnt work when compiled with mix, why is that?

Google autocomplete doesnt work when compiled with mix, why is that?

So I'm trying to clean things up a bit, and I want to put the google autocomplete code in its own js file and compile it for the public directory

looking in view source I can see the compiled code if I click the file, so everything is wired up correctly

And if I overwrite the compiled code in public/js with the original uncompiled code, everything works fine,

this is the error I get in chrome console

address:1 Uncaught (in promise) Ed {message: "initAutocomplete is not a function", name: "InvalidValueError", stack: "Error↵    at new Ed (https://maps.googleapis.com/m…ibraries=places&callback=initAutocomplete:149:124"}
Promise.then (async)
kj @ js?key={hidden}&libraries=places&callback=initAutocomplete:149
google.maps.Load @ js?key={hidden}g&libraries=places&callback=initAutocomplete:21
(anonymous) @ js?key={hidden}&libraries=places&callback=initAutocomplete:245
(anonymous) @ js?key={hidden}&libraries=places&callback=initAutocomplete:245
4address:150 Uncaught ReferenceError: geolocate is not defined
    at HTMLInputElement.onfocus (address:150)

this is the uncompiled autocomplete code

   // This example displays an address form, using the autocomplete feature
        // of the Google Places API to help users fill in the information.
      
        // This example requires the Places library. Include the libraries=places
        // parameter when you first load the API. For example:
        // <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
      
        var placeSearch, autocomplete;
      
        var componentForm = {
          street_number: 'short_name',
          route: 'long_name',
          locality: 'long_name',
          administrative_area_level_1: 'short_name',
          country: 'long_name',
          postal_code: 'short_name'
        };
      
        function initAutocomplete() {
          // Create the autocomplete object, restricting the search to geographical
          // location types.
          autocomplete = new google.maps.places.Autocomplete(
            document.getElementById('address'), {
              types: ['geocode']
            });    
          autocomplete.setFields(['address_component']);      
          // When the user selects an address from the dropdown, populate the address
          // fields in the form.      
        }
      
      
        // Bias the autocomplete object to the user's geographical location,
        // as supplied by the browser's 'navigator.geolocation' object.     
        function geolocate() {
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
              var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude,
                acc: position.coords.accuracy
              };      
              lat = geolocation.lat;
              lng = geolocation.lng;
              acc = geolocation.acc;
      
              var circle = new google.maps.Circle({
                center: geolocation,
                radius: position.coords.accuracy
              });
              autocomplete.setBounds(circle.getBounds());
            });
          }
        }

This is how I access it

@push('head')
<script
    src="https://maps.googleapis.com/maps/api/js?key={{ config('app.google_maps_api') }}&libraries=places&callback=initAutocomplete"
    async defer>
</script>

<script src="{{ mix('js/autocomplete.js') }}" async defer></script>

@endpush

And the user input

   <input class="form-control form-control-lg" type="text" name="address" id="address" onFocus="geolocate()"
                                        placeholder="Enter your address">