> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/google-map.md).

# Google map

<figure><img src="/files/3XKKnVrodOABY6UiOUQc" alt=""><figcaption></figcaption></figure>

Embed an interactive Google map on any Foxify page — show your store location, service area, or any address your customers need to find.

## When to use this element

Use the Google map element when you want to show a physical location directly on your page — so customers don't have to leave to search for directions.

Best fits for:

* A contact page showing your store or studio address
* A landing page for an in-store event or pop-up
* A multi-location page showing different outlets or pickup points
* Any page where helping customers find you physically drives conversions

#### How is this different from similar elements?

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Use this</td><td><strong>Google map</strong></td><td>Interactive embedded map showing a specific address. Customers can pan, zoom, and open in Google Maps for directions — all without leaving your page.</td><td></td></tr><tr><td>Use instead if...</td><td><strong>Static image</strong></td><td>You only need to show a non-interactive map image. No zoom, no directions — just a visual. Simpler but less useful for customers who need to navigate.</td><td><a href="/pages/DTErVXZkN0jMACtvQUS2">/pages/DTErVXZkN0jMACtvQUS2</a></td></tr></tbody></table>

## Quick setup

{% stepper %}
{% step %}
**Add the element**

Click **Add elements** (or press **E**) → find **Google map** → drag it onto your canvas.
{% endstep %}

{% step %}
**Enter your address**

In the Inspector panel → **General** tab → **Address** field, type the full address you want to display (e.g. "2293 Adelaide St, Ontario, Toronto, Canada").
{% endstep %}

{% step %}
**Adjust zoom level**

Use the **Zoom level** slider to set how close or wide the map view appears. A level of 14–16 works well for a single store address.
{% endstep %}

{% step %}
**Preview and publish**

Check how the map looks on mobile. Click **Save & Publish** when ready.
{% endstep %}
{% endstepper %}

> **Expected result:** An interactive map appears on your page centered on the address you entered. Customers can zoom in and out, and click **Open in Maps** to get directions in Google Maps.

### Settings — General

<table><thead><tr><th width="190">Setting</th><th width="260">What it does</th><th>When to use</th></tr></thead><tbody><tr><td>Address</td><td>The location the map centers on</td><td>Enter a full address for best accuracy — street, city, country. Partial addresses may pin the wrong location.</td></tr><tr><td>Google map API key</td><td>Unlocks custom map styling</td><td>Optional — only needed if you want to change the map's visual style (colors, labels, etc.). Leave empty for the default Google Maps style. Get a key from Google Cloud Platform Console.</td></tr><tr><td>Zoom level</td><td>Controls how close or wide the initial map view appears</td><td><strong>10–12</strong> — shows a wide city-level view. <strong>14–16</strong> — street level, good for a single address. <strong>17+</strong> — very close zoom, useful for showing a specific building.</td></tr><tr><td>Overlay opacity</td><td>Applies a color overlay on top of the map</td><td>Set to 0% for a normal map. Increase to blend the map into your page design — useful when you want a subtle branded feel over the map.</td></tr></tbody></table>

{% hint style="info" %}
**API key note:** The default map works without an API key — it uses the standard Google Maps embed. An API key is only required if you want to apply a custom map style. You can get one for free from the [Google Cloud Platform Console →](https://console.cloud.google.com/)
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/google-map.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.