> For the complete documentation index, see [llms.txt](https://webibazaar.gitbook.io/flute-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://webibazaar.gitbook.io/flute-documentation/sections/map.md).

# Map

{% embed url="<https://salesiq.zohopublic.in/signaturesupport.ls?widgetcode=siq93f38201da244cbe219b2cab71813c85342abc57dd769c6885e2bde57d2b90da>" %}

Displays an interactive map for locations or directions. Customize the map's appearance as needed.

{% hint style="info" %}
**Recommendation Size**\
Store detail image size: 612x448
{% endhint %}

<table><thead><tr><th width="270">Setting</th><th>Description</th></tr></thead><tbody><tr><td>Heading</td><td>Enter text to display as a main heading in the section. </td></tr><tr><td>Description</td><td>Enter text to display as a description in the section.</td></tr><tr><td>Desktop info width</td><td><p>Choose how much space the text/info box should take up beside the map on desktop.</p><ul><li>Small</li><li>Large</li></ul></td></tr><tr><td>Map info heading</td><td>Add a title for the info box.</td></tr><tr><td>Desktop map/image position</td><td>Choose whether the <strong>map</strong> should display on the <strong>left</strong> or <strong>right</strong> side of the section on desktop screens.</td></tr><tr><td>Content alignment</td><td><p>Customization of the "Content alignment" in the map section is as follows:</p><ul><li>Left</li><li>Center</li><li>Right</li></ul></td></tr><tr><td>Color scheme</td><td><p>In this section, you can change the background and foreground color of a section using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr><tr><td>Info color scheme</td><td><p>In this section, you can change the background and foreground color of a  info container using the color scheme.</p><ul><li>Scheme 1</li><li>Scheme 2</li><li>Scheme 3</li><li>Scheme 4</li><li>Scheme 5</li><li>Scheme 6</li></ul></td></tr></tbody></table>

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

## **Add Store**

To add store to the map section, click on the 'Add store'. There are many options available , as you can see in the below points and screenshot.

<table><thead><tr><th width="272">Block</th><th>Description</th></tr></thead><tbody><tr><td>Tab location</td><td>Enter the store tab location that will appear in the tab navigation.</td></tr><tr><td>Address</td><td><p><strong>Map info</strong> </p><p>Add key details about the store. You can include store name, address, phone number, city, state, and ZIP code.</p><p></p><p><strong>Additional info</strong> </p><p>Add any extra information, such as opening hours, contact number, or a short description about the store.</p></td></tr><tr><td>Map address</td><td><p><strong>Map address</strong> </p><p>Enter the exact store address. This will generate the embedded map location.</p><p></p><p><strong>Button style</strong> </p><p>Choose how the address link button should look: </p><ul><li>Link</li><li>Outline</li><li>Solid</li></ul></td></tr><tr><td>Image</td><td>Upload a static image of your store or a map. This will be shown if the map is not enabled.</td></tr><tr><td>Enable map</td><td>Toggle this option to show a live, embedded Google Map instead of an image.</td></tr><tr><td>Google maps embed code</td><td>Add google map embed code here.</td></tr></tbody></table>

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