Auto complete address from google api

<script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAGnSLZ6FtSfT1Pyn-_k-GTwIoLqep_wTU&libraries=places&callback=initAutocomplete"
    async defer></script>


<script>
function initAutocomplete() {
    var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete-address')), {
            types: ['geocode']
        }
    );

    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();
        if (!place.geometry) {
            window.alert("No details available for input: '" + place.name + "'");
            return;
        }

        // If the place has a geometry, store the latitude and longitude.
        document.getElementById('latitude').value = place.geometry.location.lat();
        document.getElementById('longitude').value = place.geometry.location.lng();
    });
    initMap()// this method is not for auto complete but being called for //showing map
}

you need to get your api key from google api console for place api and also add the domain where it is being used.

Note: Also your input field should have the ID of autocomplete-address as per the code above


Comments

Leave a Reply

Your email address will not be published. Required fields are marked *