google autocomplete address not working in laravel

  google-api, google-maps, laravel, php

My autocomplete address features works in HTML. But when I used it in laravel blade it won’t suggest the address when i start typing

Address pop up is not showing This is the code it works in a file with .html extension but not in laravel blade. Can you please help why the same code works well in HTML but not in Laravel.

 <div class="panel-body">
            <input id="autocomplete" placeholder="Enter your address" onFocus="geolocate()" type="text" class="form-control">
            <br>
            <div id="address22">
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">Street address</label>
                        <input class="form-control" id="street_number" disabled="true">
                    </div>
                    <div class="col-md-6">
                        <label class="control-label">Route</label>
                        <input class="form-control" id="route" disabled="true">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">City</label>
                        <input class="form-control field" id="locality" disabled="true">
                    </div>
                    <div class="col-md-6">
                        <label class="control-label">State</label>
                        <input class="form-control" id="administrative_area_level_1" disabled="true">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <label class="control-label">Zip code</label>
                        <input class="form-control" id="postal_code" disabled="true">
                    </div>
                    <div class="col-md-6">
                        <label class="control-label">Country</label>
                        <input class="form-control" id="country" disabled="true">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="auto-complete.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwd3zWcsr&libraries=places&callback=initAutocomplete" async defer></script>
<script>

    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(
            /** @type {!HTMLInputElement} */
            (document.getElementById('autocomplete')), {
                types: ['geocode']
            });

        // When the user selects an address from the dropdown, populate the address
        // fields in the form.
        autocomplete.addListener('place_changed', fillInAddress);
    }

    function fillInAddress() {
        // Get the place details from the autocomplete object.
        var place = autocomplete.getPlace();

        for (var component in componentForm) {
            document.getElementById(component).value = '';
            document.getElementById(component).disabled = false;
        }

        // Get each component of the address from the place details
        // and fill the corresponding field on the form.
        for (var i = 0; i < place.address_components.length; i++) {
            var addressType = place.address_components[i].types[0];
            if (componentForm[addressType]) {
                var val = place.address_components[i][componentForm[addressType]];
                document.getElementById(addressType).value = val;
            }
        }
    }

    // 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
                };
                var circle = new google.maps.Circle({
                    center: geolocation,
                    radius: position.coords.accuracy
                });
                autocomplete.setBounds(circle.getBounds());
            });
        }
    }
</script>

Source: Laravel

Leave a Reply