Address Autocomplete Using Google Place API In .NET MVC

This article will explain how we can set Google places in textbox using Google Places API and how to get details like address, city, state, country, and Pincode from this address in the .Net MVC Application.

For this, first of all, create the .Net MVC Application and put the below code in your Application.

Before you begin

before you start with the Places API, you need to have a project with a linked billing account and you have to enable Places API. To learn more, click here.

Create API Keys

The API key is important because it is a distinctive identifier that varifies the requests associated with your project for usage and for billing purposes. So, you must have at least one API key linked with your project.

To Get an API Key:

1. Go to Google Developer Console.
2. Go to the Credentials page.
3. On the Credentials page, click Create credentials > API key.
   The API key created dialog displays your created API key.
   (Note: Before this, you have to configure the OAuth consent screen with information about your application.)
4. Click Close.
   The new API key is listed on the Credentials page under API keys.

Add the API key to your request

You have to include an API key with every Places API request. In the following example, replace YOUR_KEY with your API key and attract this to your Application.

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

View

<div class="jumbotron">
    <h2>Google Auto Complete Demo</h2>
</div>

<div class="row">
    <div class="col-md-12 col-lg-12 form-group">
        <label>Add Location:</label>
        <input class="form-control" id="txtLocation" autocomplete="off" />
    </div>
    <div class="col-md-12 col-lg-12 form-group">
        <label>Address</label>
        <input class="form-control" id="txtAddress" autocomplete="off" />
    </div>
    <div class="col-md-2 form-group">
        <label>City</label>
        <input class="form-control" id="txtCity" autocomplete="off" />
    </div>
    <div class="col-md-2 form-group">
        <label>State</label>
        <input class="form-control" id="txtState" autocomplete="off" />
    </div>
    <div class="col-md-2 form-group">
        <label>Country</label>
        <input class="form-control" id="txtCountry" autocomplete="off" />
    </div>
    <div class="col-md-2 form-group">
        <label>Pincode</label>
        <input class="form-control" id="txtPincode" autocomplete="off" />
    </div>
</div>

Script Section

<script>
    $(document).ready(function () {
        var places;
        google.maps.event.addDomListener(window, 'load', function () {
            places = new google.maps.places.Autocomplete(document.getElementById('txtLocation'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var address = '';
                var route = '';
                var postcode = '';
                var locality = '';
                var state = '';
                var country = '';
                var place = places.getPlace();
                var AddressComponents = place.address_components;
                for (var i = 0; i < AddressComponents.length; i++) {
                    var componentType = AddressComponents[i].types[0];
                    switch (componentType) {
                        //For Street Number
                        case "street_number": {
                            address = `${AddressComponents[i].long_name} ${address}`;
                            break;
                        }
                        //For Address
                        case "route": {
                            route = AddressComponents[i].short_name;
                            break;
                        }
                        //For PinCode
                        case "postal_code": {
                            postcode = `${AddressComponents[i].long_name}${postcode}`;
                            break;
                        }
                        //For PinCode
                        case "postal_code_prefix": {
                            if (postcode == '') {
                                postcode = AddressComponents[i].long_name;
                            }
                            break;
                        }
                        //For City
                        case "locality": {
                            locality = AddressComponents[i].long_name;
                            break;
                        }
                        //For City
                        case "administrative_area_level_2": { 
                            if (locality == '') {
                                locality = AddressComponents[i].long_name;
                            }
                            break;
                        }
                        //For State
                        case "administrative_area_level_1": { 
                            state = AddressComponents[i].short_name;
                            break;
                        }
                        //For Country
                        case "country": { 
                            country = AddressComponents[i].long_name;
                            break;
                        }
                    }
                }

                //Set the Textbox values
                $('#txtAddress').val(address + " " + route);
                $('#txtCity').val(locality);
                $('#txtState').val(state);
                $('#txtCountry').val(country);
                $('#txtPincode').val(postcode);
            });
        });
        

    });
</script>

Output