Google Maps API: Autocomplete address not working in Laravel Form Collective

I'm trying to use autocomplete address in google maps api in my laravel form collective but it's not working. Can anyone help me figure out what's wrong? :(

Here is how my form looks like

    <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>      

And this is my script. It's supposed to autocomplete the input once you entered an address and it will display the address, longitude and latitude...

<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
            });
        };
}

via Chebli Mohamed