javascript - Google Places 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 自动完成，但没有谷歌自动完成

浏览器+代码

标签： javascriptlaravelgoogle-mapsgoogle-maps-api-3google-places-api