Google将APi不适用于脚本标签，但可用于开发人员工具

Question

我的Google Places API出现问题，我认为脚本加载速度太快，或者我不知道。当我加载页面时，脚本不起作用（控制台中没有错误），当我将脚本复制粘贴到控制台开发人员中时，效果很好。

我尝试将脚本包装到其中，以确保页面正在加载：

<script>
(function() {
 // My script
})();
</script>

但是它也不起作用。这是我完整的代码：

@section('content')
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <div class="form-group row">
                            <label for="city" class="col-md-4 col-form-label text-md-right">Ville de résidence</label>

                            <div class="col-md-6">
                                <input id="city" type="text" class="form-control @error('city') is-invalid @enderror" name="city" value="{{ old('city') }}" required autocomplete="off">

                                @error('city')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                            </div>
                        </div>
</form>
@endsection

@section('javascript')
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_APIç_REMOVED_FOR_STACKOVERFLOW&libraries=places"></script>

<script>
    var input = document.getElementById('city');
    var autocomplete = new google.maps.places.Autocomplete(input,{types: ['(cities)']});
    google.maps.event.addListener(autocomplete, 'place_changed', function(){
         var place = autocomplete.getPlace();
      })
</script>

@endsection

我只想使工作自动完成。

谢谢。

编辑： 我具有默认的Chrome自动补全功能，但没有Google自动补全功能

浏览器+代码