The address component relies on the Google Places API and Maps JavaScript API to suggest relevant addresses as the user types. When a suggested address is selected the remaining address fields are automatically populated (state/province, country, etc.). This is to ensure that all address fields are accurate, and a valid address was entered. The Google Geocoding API is also used to get the coordinates of the address so it can be displayed on a map.
The address component simply requires an API key to function properly. This one API key will provide access to all the required Google APIs as long as they’re activated.
To follow this guide, you must have a valid Google account and have signed up to Google Cloud Platform (GCP). This guide assumes you have no existing projects on GCP. However, if you do have an existing project that you would like to use, you can skip to Enabling APIs on a Project.
If you have never used GCP, you will be prompted to setup a billing account while following this guide. You will not be able to interact with the APIs without setting up your billing account. Create a billing account if prompted and then proceed to use this guide. If no prompt to setup a billing account appears then you can manually setup a billing account by following this video tutorial.
Creating a Project on GCP
On GCP, navigate to the Manage Resources page by searching “Manage Resources” in the search bar at the top of the page and selecting Manage Resources or by clicking this link.
On the Manage Resources page click the Create Project button located at the top left of the page.
Enter a project name and optionally add the project to an organization. Then select the Create button.
Once the project has finished being created, the Manage Resources page will be updated to show your newly created project.
Enabling APIs on a Project
To enable APIs on a project, navigate to you GCP dashboard by selecting the hamburger menu icon > Home > Dashboard.
If you have multiple projects on GCP, you may need to specify what project you want to use using the dropdown. If you just created a new project and have no other projects on GCP, your new project will be automatically selected. Validate that the project you want to enable APIs on is the selected project.
On the projects dashboard go to the APIs overview page by clicking the link in the APIs box.
From the APIs overview page select the Enable APIs and Services button.
Using the search bar, search for Maps JavaScript API and Places API and enable each API using the Enable button on each page.
After enabling an API, you will be redirected to Google Maps Platform APIs where you can see a list of APIs enabled for the current project.
Ensure that both Maps JavaScript API, Places API, and Geocoding API are enabled.
If only one is enabled, then go back to the API Library by pressing the back button in your browser or by returning to the APIs overview page and selecting the Enable APIs and Services button from the previous step.
Proceed to search and enable the missing APIs.
Generating an API Key
After enabling the required APIs, navigate to the Credentials page located in the left-hand navigation. Then select the Create Credentials button and select API Key.
An API key will then be generated. This is the key that will be used to interact with the enabled APIs for the address component. The Key can be copied by selecting the Copy API Key button.
IMPORTANT NOTE: If you already generated a key and are enabling additional APIs then there’s no need to generate a new key, the existing key can be used.
