> For the complete documentation index, see [llms.txt](https://docs.rh-webdesign.com/cms-bundle/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.rh-webdesign.com/cms-bundle/en/elemente/company/maps.md).

# Maps

Embed an interactive map with one or more locations

With the **Maps** element you embed an interactive map (based on OpenStreetMap) into your shopping experience – ideal for location and contact pages or a store finder. You simply enter the locations as an address; the coordinates are determined automatically. Clicking a marker shows additional information as well as a button to open the route directly in Apple or Google Maps.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-db08535af316434fea540ba7ec3b1db2769e27ea%2Fkarten-beispiel.webp?alt=media" alt=""><figcaption><p>Example in the storefront: interactive map with two location markers</p></figcaption></figure>

{% hint style="success" %}
**No API key needed**

The map and the address search are based on OpenStreetMap. You don't have to set up a map service or provide an API key.
{% endhint %}

### General

On the **General** tab you create the locations. Each entry is defined via its address and automatically placed on the map. Via **"Add location"** you add further markers.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-bdadac5d4397283257af49dbd0ffed705cf715dd%2Fkarten-allgemein.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Street (1)</td><td>Street name of the location.</td></tr><tr><td>Number (2)</td><td>House number of the location.</td></tr><tr><td>Postal code (3)</td><td>Postal code of the location.</td></tr><tr><td>City (4)</td><td>City of the location. The map coordinates are determined automatically from street, postal code and city.</td></tr><tr><td>Additional information about the location (5)</td><td>Optional text that appears in the info window when the marker is clicked – e.g. opening hours or a note about the store.</td></tr></tbody></table>

{% hint style="info" %}
Using the icons on the right of each entry you can duplicate, move or delete a location. If several locations are set, the map automatically zooms so that all markers are visible.
{% endhint %}

### Layout

On the **Layout** tab you determine the size and appearance of the map.

<figure><img src="https://118894700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhdsmo3ttoHQpDlitXnzA%2Fuploads%2Fgit-blob-ebd986976290ec849ed4b63149ace846c56d5dee%2Fkarten-layout.webp?alt=media" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="287">Function</th><th>Description</th></tr></thead><tbody><tr><td>Map width (1)</td><td>Width of the map area in percent or pixels.</td></tr><tr><td>Map height (2)</td><td>Height of the map area in pixels or vh.</td></tr><tr><td>Map style (3)</td><td>Choose the appearance of the map. Available are <strong>Standard</strong>, <strong>Humanitarian</strong>, <strong>Topo</strong>, <strong>Light</strong>, <strong>Dark</strong>, <strong>Voyager</strong>, <strong>Wikimedia</strong> and <strong>Satellite</strong>.</td></tr></tbody></table>