# How to get a Google Maps API key

![](https://docs-assets.foxecom.app/documentation/9244809e-6a05-45fd-b811-67aea2673f58.jpg)

The [**Map** ](https://docs.foxecom.com/motrix-theme/theme-blocks/map)block needs a **Google Maps API key** to display a map on your store. The key itself is free, but **Google requires a billing account** to be linked to your Google Cloud project before you can create one.

## What you'll actually be charged

**Nothing for the Map block in Motrix.** The block uses the [**Maps Embed API**](https://developers.google.com/maps/documentation/embed/get-api-key), which Google provides free with unlimited use.

Google still requires a billing account to be linked to your project before you can create a Maps API key. Your payment method stays on file, but the maps used by this block aren't billed.

<Hint type="warning">
  **Don't want to add a payment method?** Google doesn't issue a Maps API key without a billing account. This is a Google requirement, not a theme limitation
</Hint>

Learn more: [Set up the Maps JavaScript API in Google](https://developers.google.com/maps/documentation/javascript/get-api-key)

## Set up your Google Maps API key

<Stepper>
  <Step title="Create a project">
    1. Go to [**Google Cloud Console**](https://console.cloud.google.com/) and sign in with your Google account.
    2. Open the project dropdown at the top of the page and click **New project**.
    3. Enter a recognisable name, such as your store name, then click **Create**.
    4. Select the new project from the project dropdown before continuing.

    <Hint type="warning">
      Make sure the correct project is selected before completing the remaining steps. Your API key and enabled API must belong to the same project.
    </Hint>


  </Step>

  <Step title="Attach billing">
    If you already have a Google Cloud billing account:

    1. Go to **Billing** in the left-hand menu.
    2. Select **Link a billing account**.
    3. Choose your existing billing account and confirm.

    Avoid **Set up billing** or **Add billing account** if you already have one. These options can start a new billing setup instead of linking your existing account.

    <Hint type="info">
      If this is [your first Google Cloud project](https://developers.google.com/maps/get-started), follow Google's billing setup wizard to create your billing account. For future projects, use **Link a billing account** to connect the existing account.
    </Hint>
  </Step>

  <Step title="Turn on the Maps Embed API">
    1. Go to **APIs & Services → Library**.
    2. Search for **Maps Embed API**.<br/><img height="328" width="310" src="https://docs-assets.foxecom.app/documentation/d41577cb-efb9-4fac-b5b9-228b1c154ab1.png" />
    3. Open it and click **Enable**.<br/><img height="265" width="339" src="https://docs-assets.foxecom.app/documentation/c50179be-a778-4da6-84c7-e7aa22d4530d.png" />

    Enable only **Maps Embed API** for this block. The Map block doesn't use Maps JavaScript API, Geocoding API, or Places API.
  </Step>

  <Step title="Create the key">
    1. Go to **APIs & Services → Credentials**.
    2. Click **Create credentials → API key**.
    3. Copy the generated key.
  </Step>

  <Step title="Restrict the key">
    Restrict the key to your store domains to prevent others from using it on their websites.

    1. On the **Credentials** page, click the new API key.
    2. Under **Application restrictions**, select **Websites**.
    3. Add both store domains:
       * `https://yourstore.com/*`
       * `https://yourstore.myshopify.com/*`
    4. Under **API restrictions**, select **Restrict key**.
    5. Select **Maps Embed API** only.
    6. Click **Save**.
  </Step>

  <Step title="Paste the key into the theme">
    1. Open the theme editor and select the **Map** block.
    2. Open the **Map** group.
    3. Paste the key into **Google Maps API key**.

    ![](https://docs-assets.foxecom.app/documentation/acfe79fc-d5ef-42a1-bfe9-c741dad5c56a.png)


  </Step>
</Stepper>

## If the map doesn't show

<Table widths="30%">
  | What you see                                              | What it usually means                                               | What to do                                                                         |
  | --------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
  | **A grey placeholder image**                              | The API key is empty or hasn't been saved.                          | Check Google Maps API key in theme editor to ensure you have entered it correctly. |
  | **"This page can't load Google Maps correctly"**          | **Maps Embed API isn't enabled** for the project linked to the key. | Check the selected project and enable Maps Embed API.                              |
  | **The map works in the editor but not on the live store** | The live domain isn't included in the key's restrictions.           | Add both your `.com`                                                               |
  | **A map of the wrong place**                              | The **Location** uses an incorrect or unclear address.              | Enter the address as you would search for it on Google Maps.                       |
  | **A map with no pin**                                     | **Coordinates** were entered instead of an a  ddress.               | Use a street address if you want a location pin. Coordinates only centre the map.  |
</Table>

## Changing or replacing a key

If your API key is exposed, create a replacement before deleting the old one:

1. Go to **APIs & Services > Credentials**.
2. Create a new API key and apply the same restrictions.
3. Paste the new key into the [**Map** ](https://docs.foxecom.com/motrix-theme/theme-blocks/map)block.
4. Delete the old key.

This keeps the map working while you replace the exposed key.