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