First thing, you will need to do is, to get your Google Maps API key, which you can get from Google's developer console. If you haven't created the project yet on the developer's console you need to create one.
Once you have the API key, we will create an 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.
place_changed the 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
Once we have all the components, we will loop through them and show data in blank HTML input fields.
Here is the complete code
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 the above code with your API key, you will see the output as below
Here is the fiddle:
place.address_components' which we are using in for loop.
If type ="street_number", then it will return us Street Number, if there is any in address.
That's it, fiddle uses
?sensor=false instead of API key, which you can use for testing purposes.
You may also like to read:
Showing Google Maps in ASP.NET MVC with Marker (Lat/Long data from database)
calculate distance between two locations in google maps