Google Maps API：自动填充地址在Laravel Form Collective中不起作用

Question

我正在尝试以我的laravel形式使用google maps api中的自动填充地址，但无法正常工作。谁能帮助我找出问题所在？ ：（

这是我的表单的样子

    <div class="row">
    <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5>Search</h5>
            </div>
            <div class="card-body">
                    {!! Form::open(['method'=>'GET','class'=>'navbar-form navbar-left','id'=>'textautocomplete','role'=>'search'])  !!}
                        <div class="form-group col-md-12">
                            {!! Form::inputGroup('text', 'Location', null, null, ['placeholder' => 'Your Location here...'])  !!}
                        </div>
                        <div class="form-group col-md-12">
                            <label>Therapist Type</label>
                            {!! Form::select('therapist',array('Physical Therapist', 'Occupational Therapist')) !!}
                        </div>
                        <div class="form-group col-md-12">
                            {!! Form::inputGroup('text', 'Specialty', 't_specialties', null, ['placeholder' => 'Specialty']) !!}
                        </div>
                        <div class="form-group col-md-12">
                            <label id="results"></label>
                        </div>
                        <div class="card-footer col-md-12">
                            <button class="btn btn-default" type="submit">
                                 <i class="fa fa-search"></i> Submit
                            </button>
                        </div>
                    {!! Form::close() !!}
            </div>
        </div>
    </div>

<div class="col-sm-6 col-md-6 col-lg-8">
    <div class="card text-white bg-success mb-3">
        <div class="card-header">
            <h5>Who's Nearby</h5>
        </div>
        <div class="card-body" style=" height: 400px;">
            <div class="row">
                <div class="col-md-12">
                    <div id="map"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="col-sm-6 col-md-6 col-lg-12">
    <div class="card">
        <div class="card-header bg-info">
        <h5>Therapists Found...</h5>
        </div>
        <div class="card-body" style="overflow: scroll; height: 300px;">
            <table>
                <tr>
                    <td>
                    <div class="card" style="width: 20em; padding: 5px;">
                    <center>
                        <i class="fas fa-user-circle fa-4x" style="padding: 5px;"></i>
                        <div class="card-body">
                            <h4>Therapist Name</h4>
                            <p>
                                <b>Distance:</b> 10km 
                                <br>
                                <b>Ratings/Reviews:</b> 4.5 stars
                                <br>
                                <b>Rate:</b> 500 per hour
                            </p>

                            <button class="btn btn-sm btn-success">Book</button>
                            <button class="btn btn-sm btn-info">View</button>
                        </div>                                  
                    </center>
                    </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>      

这是我的脚本。输入地址后，它应该会自动完成输入，它将显示地址，经度和纬度...

<script>
    function initMap() {
    function userLocation() {
        var defaultLat = parseFloat($('[name=latitude]').val()) ||  10.3157,
            defaultLng =  parseFloat($('[name=longitude]').val()) ||  123.8854;
        return {
            lat: defaultLat,
            lng: defaultLng
        }
    }
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 16,
        center:  userLocation()
        });
    var marker = new google.maps.Marker({
        map: map,
        position: userLocation()
        });

        google.maps.event.addDomListener(window,'load',initialize);
        function initialize(){
            var autocomplete = new google.maps.places.autocomplete(document.getElementById('textautocomplete'));

            google.maps.event.addListener(autocomplete, 'place_changed', function(){

                var place = autocomplete.getPlace();
                var location = "<b>Address:</b>"+place.formatted_address;+"<br/>";
                location += "<b>latitude:</b>"+place.geometry.location.lat()+"<br/>";;
                location += "<b>Longitude:</b>"+place.geometry.location.lng()+"<br/>";  
                document.getElementById('results').innerHTML = location
            });
        };
}