Google Places Autocomplete

How to use it

In order to use this service you must first create a project in Google Cloud Platform following this simple steps:

Create a new project in Google Cloud Platform

Open Google Cloud Platform and create a new project by clicking in the top left of the screen.
After creating the project, make sure it is selected in the dropdown.

Enable APIs

On top left menu, navigate to API’s and services > Library. There are 2 libraries that you must enable in order to make the autocomplete work:

• Maps JavaScript API.
• Places API.

Open each one and click on Enable.

Create API Credentials

Navigate to API’s and services > Credentials and select Create credentials: API Key.
Google will autogenerate a new API key for you, write it down as you will need it later.
Once the API Key is created, click on Restrict Key.

Restrict API access

In order to avoid other people/websites using your API keys, you must restrict its use to your domain.
Select URL HTTP References and add the domains that will be using this service. You can put an exact URL or use the asterisk (*) to target subdomains or paths.

Create billing account

In case you wondered, no, this service is not free. BUT Google provides a free 300€ budget for all new accounts which will be enough to cover the possible expenses.
You can check the actual pricing of the service here.
‍
In order to get the free 300€ budget, you must create a new billing account and bind it to the project. Navigate to Billing through the top left menu to do it.

Create form input

Add a simple text input in your form and give it an ID. This ID will be used to target the element in the code.

Add the custom code

Copy this custom code, replace the following elements and put it in the before </body> tag of your page/project:

• YOUR_API_KEY: replace it with your API Key, duh.
• INPUT_ELEMENT_ID: replace it with the ID of the input element that will use the service.

<!-- Load Google Places API -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

<!-- Set autocomplete input -->
<script>
  var gpaInput = document.getElementById("INPUT_ELEMENT_ID");
  var autocomplete = new google.maps.places.Autocomplete(gpaInput);
</script>