# Creating a Google Maps API key

{% hint style="success" %}
**Why do you need to create a Google Maps API key?**

* You want to show a map for PICKUP LOCATION
* You want to validate **local delivery by address with maximum distance** from your store 
  {% endhint %}

{% hint style="warning" %}
You must have an active GG Maps API key to activate feature for Pickup Map and Local delivery distance restriction.
{% endhint %}

## 1. New Google Cloud users

To create a Google Maps API key, follow:

#### Step 1.  Visit [Google Maps Platform](https://mapsplatform.google.com/) page and click Get started 

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F90xAFTmgUqR557SmWFvI%2Fimage.png?alt=media&#x26;token=8853377c-69c2-45d2-b508-2574b0c2e787" alt=""><figcaption></figcaption></figure>

#### Step 2. Verify your Account Information and fill in Payment details to add your business

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2Fw9po6znxVfnDiUets9Hd%2Fimage.png?alt=media&#x26;token=e18a40a4-bcdc-49a5-9ee8-4f1e7ac832cb" alt=""><figcaption></figcaption></figure>

#### Step 3. Copy the API Key and check Enable all

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FGCg4OU1FNz61qNUHB2tR%2Fimage.png?alt=media&#x26;token=0225ac7f-033f-478c-888a-0f78e31b2664" alt=""><figcaption></figcaption></figure>

#### Step 4. Go to Google Maps Platform and choose "Maybe later" to not add a restriction

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FgjM3Ak7a0U1UXzeZPUy4%2Fimage.png?alt=media&#x26;token=371b7fa1-e54a-4b55-a2a4-0d0b8aa0ff05" alt=""><figcaption></figcaption></figure>

## 2. Exisiting Google Cloud User

#### Step 1.  Visit [Google Maps Platform](https://mapsplatform.google.com/) page and click Get started&#x20;

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FXLBN8LYpuBUwm6xcTfnR%2Fimage.png?alt=media&#x26;token=c8050d6d-bf7d-479e-bdab-cd607d1e8a1c" alt=""><figcaption></figcaption></figure>

#### Step 2.  Click My First Project and choose New Project

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F4t1KwMZJPzRbzNm5EqIh%2Fimage.png?alt=media&#x26;token=5a539f41-a7af-47d0-8d00-7ae699b7dee9" alt=""><figcaption></figcaption></figure>

#### Step 3. Add a Project Name and Billing account and click Create.

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FSmzuYEaajkC5TmXtXqo3%2Fimage.png?alt=media&#x26;token=5e73a0b9-1600-431b-b036-6b8a7098d272" alt=""><figcaption></figcaption></figure>

#### Step 4. Click Select project and then click Keys & Credentials

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FoHcAapOXNEZKExIjQWEf%2Fimage.png?alt=media&#x26;token=27284450-efeb-4be6-95cf-40e57b70e326" alt=""><figcaption></figcaption></figure>

#### Step 5.  Copy the API Key and check Enable all

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FwPp93Ed4G82t9YeVQJD2%2Fimage.png?alt=media&#x26;token=c3e91131-4cfc-420a-8523-861f1616cdda" alt=""><figcaption></figcaption></figure>

#### Step 6. Go to Google Maps Platform and choose "Maybe later" to not add a restriction

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FA1hMFSFeVtVmUFJU6gyC%2Fimage.png?alt=media&#x26;token=27052e18-4413-44b5-ae12-4da0de416ac3" alt=""><figcaption></figcaption></figure>

## 3. Use case

After having a valid API key, you can use this key to activate feature for Store pickup location and Delivery distance restriction.

{% hint style="success" %}
Ensure that you have enabled these API: [Routes API ](https://console.cloud.google.com/apis/library/routes.googleapis.com?inv=1\&invt=Abs26Q\&project=daring-solstice-454704-f1)and [Maps JavaScript API](https://console.cloud.google.com/apis/library/maps-backend.googleapis.com?inv=1\&invt=Abs26Q\&project=daring-solstice-454704-f1) and [Places API](https://console.cloud.google.com/apis/library/places.googleapis.com?inv=1\&invt=AbtCuA\&project=maps-projects-454903\&pli=1)
{% endhint %}

### 3.1. Store Pickup Map

#### Step 1.  Navigate to General Settings and click Advanced Settings, then choose Enable Google Map

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F2kbFLLhWMB91NVgZicpH%2Fimage.png?alt=media&#x26;token=f6083cac-7d48-4372-bcf3-2f77dd344d4e" alt=""><figcaption></figcaption></figure>

#### Step 2. Paste your API key&#x20;

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FqSvmQ71elBzieLkVA281%2Fimage.png?alt=media&#x26;token=c4e2fcc3-17d7-40a5-8955-f3358807baf3" alt=""><figcaption></figcaption></figure>

#### Step 3. If you have added an API key successfully, it will appear here

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FAUmwJb5oJoASvzXA9s6I%2Fimage.png?alt=media&#x26;token=4818da6a-4df2-4936-ae1d-4a9dd51390df" alt=""><figcaption></figcaption></figure>

As a result, your storefront will look like this:

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F9h7yybzQGH0POQyJpKNi%2Fimage.png?alt=media&#x26;token=a1345211-3158-4269-ab19-a80d6ea00ff4" alt=""><figcaption></figcaption></figure>

### 3.2. Local delivery distance restriction

#### Step 1.  Navigate to General Settings and click Advanced Settings, then choose Local Delivery Validation

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F6YnCeOJHTVnTPOUfxa0g%2Fimage.png?alt=media&#x26;token=ee5d6e5c-5ced-41ad-ae6e-d4009dbb6f41" alt=""><figcaption></figcaption></figure>

#### Step 2.  Paste your API Key

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FzZFqF80FEifm3E2W8KS0%2Fimage.png?alt=media&#x26;token=690f3380-fc8a-42d2-a097-4c3be35e5698" alt=""><figcaption></figcaption></figure>

#### Step 3. After successfully adding API key, choose the unit you want to measure distance in

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2F43OMEuEUh9XPMs3FmrZP%2Fimage.png?alt=media&#x26;token=86da2f11-db92-44cd-bdde-3a180aa97527" alt=""><figcaption></figcaption></figure>

#### Step 4. Go to Location and edit Delivery settings to choose maximum distance you want to set

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FX2EOfiua5hIimt0kRn10%2Fimage.png?alt=media&#x26;token=55434c3f-fe8f-4abc-81a4-2cd08bd15316" alt=""><figcaption></figcaption></figure>

In the storefront, your customers will need to enter their address in the widget to check if delivery is available

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FD5lhqV6oqxQEYfYtU4v1%2Fimage.png?alt=media&#x26;token=ce9b7adc-1dec-4d39-805b-ff6860c5b03f" alt=""><figcaption></figcaption></figure>

If the address that the customer entered in the widget falls within the radius you specified in your delivery condition settings, he will be able to proceed

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FkP6Wi9p91jUQrpUR4UGL%2Fimage.png?alt=media&#x26;token=68335d8b-8f75-4650-b77e-0b6f67d3f900" alt=""><figcaption></figcaption></figure>

If the address that the customer entered in the widget is out of the radius you specified in your delivery condition settings, he will be unable to proceed further

<figure><img src="https://825397875-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fdt3xbyFDcRxJKS1ZARtZ%2Fuploads%2FXek1vNZKegkUbjyHEWmn%2Fimage.png?alt=media&#x26;token=4c5793da-53d8-410e-b5d6-f02bb4edbb61" alt=""><figcaption></figcaption></figure>