We use Google for many things everyday reading news, maps, directions and much more. It’s no more restricted to tech community rather it’s become a common sense of everyone around the world. The best has happened to the internet is adding business locations which has pretty much simplified life of a common man.
Important Things to Know About API Before Starting UP
- It’s important to understand the use of API keys anywhere not just this tutorial. For instance require enabling to make them work.
- It’s necessary to add credit card or billing address anyhow—even if you are using the free version of Google Places/Map API.
- Google Map API Key is a premium version. So there’s no guarantee that the free version would work to the perpetuity after the limit has been reached. So make sure you know what you are buying into before adding your billing address/card number to work with free Google Map API.
In this tutorial we would learn how to us Google API Key to implement Google Places autocomplete for location address
What is Place Autocomplete?
We need to understand that the Place Autocomplete is a web-service which is responsible for HTTP requests for location predictions which contains specifics about textual search string and optional geographic bounds. We can use it to complete textual geographic searches and the results would contain location details and business addresses.
So the address/location fields get filled automatically as we need to fill locaiton details for different projects. If we create custom address autocomplete it takes a lot of time otherwise. We can use Google API to fill all such fields automatically. We can use a text string to find the locations. In the results we would see the possible results fetched to us to choose from.
We can put up any type of query like address or phone number and find the address or even if someone want to search the same address the results would be there.
The request must be a Find Place string with non-string data like LAT/LNG or a plus code etcetra.
We have seen in this picture that in Google maps API we can easily find related places and the place we are looking for by just typing a couple of first-letters about the place.
Using Google Map API Key
First of all we have to get the Google API key– to do that we need to create an API key, just follow the steps given below.
We need to visit the Google Developer Console for the API key first then follow each of the steps shown here:
#1 We Would Select The Dashboard First (From The Left-Side)
#2 Select Our Project
#3 Create A New Project
Once we choose to ‘Create a New Project,’ a new window would pop up as shown in the screen-shot here:
After successfully creating a project, the next thing is to select the side menu bar and click credentials. Here, you can create your
Once we have created the project, then we need to select side menu and click Credentials.
We Need to Generate Our Google API Key
You’d notice as soon as we click to Create A New Project. A new window will pop up. Click on the API key, and this window pop up would open:
Next we would define the HTTPS referring path such as http://localhost/FILE_PATH by adding the localhost path for the map api.
After checking our Google Map Place API Key is enabled or not (if not then do enable it) we are almost done here with setting up the Google Map API.
If the API Key has not been enabled yet make sure to enable it. Here is how to enable Google Map API Key step-by-step:
#1 Go To The ‘Library’ Option
#2 Check if the API is enabled or not. Click on Places API
A new pop-up would open and we can see whether or not the API is enabled. See the screenshot here:
Next we have to create the name for our HTML form– AutoAddress.html and add there our HTML code like we have shown below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<title>Google map Places Autocomplete Using Google API - Laramatic.com</title>
<style>
.container{
padding: 10%;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-12"><h2>Google Places Autocomplete Example</h2></div>
<div class="col-12">
<div id="custom-search-input">
<div class="input-group">
<input id="autocomplete_search" name="autocomplete_search" type="text" class="form-control" placeholder="Search" />
<input type="hidden" name="lat">
<input type="hidden" name="long">
</div>
</div>
</div>
</div>
</div>
</body>
</html>Now we have our Google API enabled key that we can use however we wish to. Now we got it we just need to put the API key in the script that shows ‘PUT_YOUR_API_KEY_HERE.’
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=PUT_YOUR_API_KEY_HERE&libraries=places"></script>
<script>
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var input = document.getElementById('autocomplete_search');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function () {
var place = autocomplete.getPlace();
// place variable got the related info we look for
$('#lat').val(place.geometry['location'].lat());
$('#long').val(place.geometry['location'].lng());
});
}
</script>
We need to check it by executing the file as we set up our code. We would see the following on our screen if everything has been working correctly.
One thing is noticeable we’d find every place by just entering couple of first-letters. For example, if you are looking for Canada, once you press ‘C or Ca,’ it shows all the places starting with letters’ C/Ca.’
So now you learned ‘Google Places Autocomplete Implementation Using Google API’ step-by-step and it’s very simple to implement just make sure to follow each step we have shown here.
