Google API key
In order to use the Google autocomplete API, we need to create a key for application restrictions purposes.
For more information on how to create the Google API key read the following steps:
Before starting the setup process of API Key you must first have Billing Enabled on your Google Console Account.
Please go to the following URL and select your project to enable billing
https://console.cloud.google.com/project/_/billing/enable
- Go to the Google Cloud Platform Console.
- if you don’t have a project please click create a project, you can call the project by the name of your site.
- Click the Select a project button, then select the project you set up for the delivery drivers plugin and click Open.
- On the left menu click on Library and enable the following APIs: Places API, Maps JavaScript API, Maps Embed API, Geocoding API.
- On the left menu click on Credentials and follow the next steps.
Create a key for website Application restrictions.
- Click on the Create Credentials button at the top of the page and select API Key.
- The new pop-up window will show up with your new key, click restrict key.
- On the key settings page, you can call the key as website key.
- On the Application restrictions section choose HTTP referrers (web sites).
- A Website restrictions section will show up, click Add an item.
- Write your domain as follows: *.example.com/* , example.com/* , http://example.com/* , https://example.com/* and click done.
- On the API restrictions section, you can choose none or If you want to enabled APIs click Restrict key and select the following APIs: Places API, Maps JavaScript API, Maps Embed API, Geocoding API.
- Click the Save button.
- Copy the key and go to the plugin settings and set the key on the google key input.
Billing address & Shipping address
Enable autocomplete address for billing address and shipping address on the checkout page. you can set it both or set only one.
Country restrictions
Choose countries to limit the autocomplete search results, you can choose up to 5 countries.
Map
Enable maps on the checkout page for both the billing address and the shipping address.
Center map
Enable you to center the map by adding latitude & longitude, You can find the coordinates of a place on Google Maps.
Map position on checkout
Choose where to show the map on the checkout page. you can add the map before the address form or after the address form.
Location Picker
Enable location picker on the map, the customer can choose his location on the map and the address will be filled automatically.
Coordinates
Enable adding latitude and longitude to order with a link to show on the map.
Customer location
Enable use of customer current location.
*Note
- If you are using cache plugins or services, please disable them on the checkout page
Also, disable “combine JS files” and “defer render-blocking JS” as well.