Google Places API
With the Google Places API, you have an autocomplete feature for the address of customers in the "Checkout" area. So when a customer starts typing an address, they will start seeing relevant addresses that might be a possible match and customers can select from the dropdown. As they do this, the "City" and "Postal Code" fields get auto-filled.
Moreover, the "Geolocation" field, that is hidden in the frontend, is also auto-filled. Suppliers can get the Geolocation of the selected address in the admin panel in orders placed.
- You need to go to "Admin > Settings > Checkout" of your website. On the right side, click on "Add Field" to create a field called "Geolocation"
Add the following info in respective fields (if you do not see similar feilds translate you page to English); in Tag : Geolocation, in Area : Shipping and billing address and in Type : Input Field. After this you need to uncheck "Required Field" and then click "Record". This will create the "Geolocation" field in the frontend.
You need to have "Google maps API Key". Go to https://console.cloud.google.com/ and create a project and/or select a project if you already have one created.
- Next, you need to configure your API credentials, for this click on the "API & Services" tab from the left menu bar. Go to "Credentials".
- You have the option to "Create Credentials". This will give you access to your API Key.
- Once you have the API key, you can rename if you want.
- Then you need to enable 2 API's from there: 1. Maps JavaScript API and 2. Places API. For this, go to "Library" from the "API & Services" menu. Search for "Maps JavaScript".
- After you click "ENABLE" you can go to APIs under the Google Maps and click on "Places API".
- Lastly, go back to the "Credentials" page under "API & Services", you will need to COPY Your API KEY after the next step.
- Go to themes editor section and in "Payment > Checkout" and scroll to the end, "Copy/Paste" the following code:
- Add "Your Google API KEY" in the script on the code above. Put it in place of the words: GOOGLE_API_KEY
- Click "Save" and go to your store to make a test.
If you have any questions you can write to our support channel