> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/decorative/google-maps.md).

# Google maps

The **Map** block shows a location on a map inside a section, centred on coordinates you enter rather than on a search term. It is added inside a section, most usefully on a contact or store page beside the written address, so shoppers can see where you are before they decide to visit. Because the centre point comes from latitude and longitude, the map lands on the exact spot even when the street address is ambiguous.

<figure><img src="/files/NKC46MKxYnFPk8A8s31n" alt=""><figcaption></figcaption></figure>

### How to add it <a href="#how-to-add-it" id="how-to-add-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, click the section you want to add the map to.
3. Click **Add block** and choose the map block.
4. Enter the **Location** name, then paste the **Latitude** and **Longitude** of the spot.
   {% endhint %}

*Result:* the preview shows the map centred on the coordinates you entered.

### General settings <a href="#general-settings" id="general-settings"></a>

| Setting           | Description                                                                                                                                                      |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Location**      | The name shoppers read for this place, for example "New York" or the name of the shop itself, used as the label or marker title.                                 |
| **Longitude**     | The east to west coordinate of the point the map centres on, such as -74.005974. A rounded value moves the centre by streets, so paste the full number.          |
| **Custom Height** | Sets the height of the map section. Increase it to show more of the surrounding area, or reduce it for a more compact layout.                                    |
| **Latitude**      | The north to south coordinate of that same point, such as 40.712776. It has to be as precise as the longitude, since the two are read together.                  |
| **Corner Radius** | <p>How rounded the corners of the map frame look:</p><ul><li>None (square corners)</li><li>Custom (you set the rounding yourself).</li></ul>                     |
| **Custom Radius** | <p><em>Only visible when Corner Radius is Custom</em>.</p><p>The exact rounding of the map frame, from 0px to 100px, so it can match the pictures around it.</p> |

{% hint style="success" %}
Refer to this article \[[here](https://support.google.com/maps/answer/18539?hl=en\&co=GENIE.Platform%3DDesktop)] for instructions on how to find the longitude and latitude of your location.
{% endhint %}

### Spacing <a href="#spacing" id="spacing"></a>

These settings control the external spacing (padding) applied directly above and below this specific block.

| Setting    | Description                                                                                                      |
| ---------- | ---------------------------------------------------------------------------------------------------------------- |
| **Top**    | Adds space above the map so it does not run straight into the address text over it. Accepts 0px to 100px.        |
| **Bottom** | Leaves space under the map before the next block, such as opening hours or a contact form. Accepts 0px to 100px. |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Shoppers see where the location actually is, next to the wording that describes it.
* The map centres on the coordinates you entered, so an unusual or newly built address still lands correctly.
* Wrong or swapped coordinates put the map in the wrong country without any warning, so check the preview after pasting them.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Contact form](/velare/customize-your-pages/forms-1/contact-form.md): the block shoppers use to get in touch after finding you
* [Decorative](/velare/customize-your-pages/decorative.md): the other blocks in this group
* [Text](/velare/customize-your-pages/basic/text.md): for the written address and opening hours beside the map


---

# 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/decorative/google-maps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.