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 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.
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:
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>
<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> $(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>
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular