In previous article, I have mentioned Using Google maps Javascript api in HTML (Show location with Marker) but now in this article, I have mentioned how to implement Google Maps autocomplete search box using Javascript or you can how to implement Google places autocomplete example without using Google Maps.

First thing, which you will need to do is, to get your Google Maps API key, which you can get from your Google's developer console. If you haven't created the project yet on the developer's console you need to create one.

Also, you would have to enable Google Maps Javascript API plugin.

Once you have the API key, we will create a input, using which the Google Places Autocomplete will be implemented.

<input id="autocomplete" placeholder="Enter your address" type="text" /><br/>

Now, we will have to inherit the Google Maps API script along with the places library in our HTML page.

Once Google Maps, is loaded, the Google Places Autocomplete is applied to the TextBox and then the place_changed event handler is assigned to it.

The place_changed event handler is triggered when a place is selected in the Google Places Autocomplete TextBox.

It first gets the selected place and then determines its address location and passes all the details like city, postal code etc in place.address_components.

Once we have all the components, we will loop through them and show data in blank HTML input fields.

Here is the complete code

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YourAPIKEY&libraries=places"></script>

 <script src="https://code.jquery.com/jquery-3.6.0.js"
			  crossorigin="anonymous"></script>
        
        
 <input id="autocomplete" placeholder="Enter your address" type="text" /><br/> <br/>
 
 <input type="text" id="mainAddress" /><br/><br/>
  <input type="text" id="locality" /><br/> <br/>
   <input type="text" id="postalcode" /><br/><br/>
   <input type="text" id="state"><br/><br/>
   <input type="text" id="city"><br/><br/>
 
 <script>
    var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));
            autocomplete.setFields(['place_id', 'name', 'address_components', 'geometry']);
            autocomplete.addListener('place_changed', function () {
                const place = autocomplete.getPlace();
                const components = place.address_components;

                if (typeof components !== 'undefined') {
                    for (component of components) {

                        const type = component.types[0];
                        const longName = component.long_name;
                        const shortName = component.short_name;
                        switch (type) {
                            case 'street_number':
                                streenumber = longName
                                break;
                            case 'route':
                                mainAddress = streenumber + " " + shortName;
                                break;
                            case 'sublocality_level_2':
                                mainAddress = mainAddress + " " + shortName;
                                break;
                            case 'sublocality_level_1':
                                mainAddress = mainAddress + " " + shortName;
                                break;
                            case 'locality':
                                $("#mainAddress").val(mainAddress);
                                $("#locality").val(shortName);
                                break;
                            case 'postal_code':
                                $('#postalcode').val(longName);
                                break;
                            case 'administrative_area_level_2':
                               $("#city").val(longName);
                                break;
                            case 'administrative_area_level_1':                            
                                $("#state").val(longName);
                                break;

                        }
                    }
                }
            });
   </script>

In the above code, you need to replace 'YourAPIKEY' with your Google API key, which you can get from Google developer console.

Once, you will execute above code with your API key, you will see output as below

google-autocomplete-example-without-maps-min.gif

Here is the fiddle:

That's it, fiddle uses ?sensor=false instead of api key, which you can use for testing purpose.

You may also like to read:

Showing Google Maps in ASP.NET MVC with Marker (Lat/Long data from database)

Adding Multiple markers in Google Maps using Javascript API?

calculate distance between two locations in google maps

Autocomplete Textbox using Javascript