> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Map

> Embed a Google Map displaying your store location with customizable zoom level

The Map section embeds an interactive Google Map displaying a specific address or location, perfect for showcasing physical store locations, office addresses, event venues, or any location customers need to find. This section requires a valid Google Maps API key to function and provides customers with an easy way to locate your business. Use this section on contact pages, store locator pages, or anywhere you want to provide clear geographic context.

## What this section controls

This section controls map displays with the following capabilities:

* Interactive Google Maps embed
* Custom address or default shop address display
* Configurable zoom level (0-21)
* Map height controls for desktop and mobile
* Google Maps API key integration
* Section title with customizable heading size
* Section button with link and style options
* Color scheme, width, and spacing controls

## Prerequisites

Before using the Map section, you need to:

1. Create a Google Cloud Console account
2. Enable the Google Maps Embed API
3. Generate an API key

[Learn how to get a Google Maps API key](https://support.google.com/googleapi/answer/6158862?hl=en)

## Section settings

<AccordionGroup>
  <Accordion title="API key">
    **API key** — Paste your Google Maps API key in this field.

    This is required for the map to display. Without a valid API key, the map embed will not load.

    <Tip>
      Keep your API key secure. Consider setting up API key restrictions in Google Cloud Console to limit usage to your domain only.
    </Tip>
  </Accordion>

  <Accordion title="Address">
    **Address query** — Enter the address to display on the map.

    **Format:** street address, city state/country

    **Example:** 123 Main Street, New York NY

    <Note>
      If left empty, the map displays your shop's default address from Settings > General in Shopify admin.
    </Note>
  </Accordion>

  <Accordion title="Zoom level">
    **Zoom level** — Control how close the map zooms into the location.

    Range: 0-21 (default: 16)

    * **0** — Fully zoomed out (world view)
    * **10-12** — City-level view
    * **16** — Street-level view (default)
    * **21** — Maximum zoom (building-level detail)

    <Tip>
      Use 14-16 for most retail locations to show nearby streets and landmarks. Use higher zoom (18-20) if you want to highlight a specific building entrance.
    </Tip>
  </Accordion>

  <Accordion title="Section width">
    Choose the map container width:

    * **Page width** — Standard container width
    * **Fluid** — Wider, edge-to-edge within padding
    * **Full width** (default) — Complete edge-to-edge layout

    Full width is recommended for maps to maximize usability and visual impact.
  </Accordion>

  <Accordion title="Color scheme">
    Select the background color scheme for the section container (default: scheme-1). This affects the area around the map if not using full width.
  </Accordion>

  <Accordion title="Spacing">
    Control vertical spacing above and below the section with options from None to XL (0, S, M, L, XL).

    Default: M for top spacing, None for bottom spacing
  </Accordion>

  <Accordion title="Section border">
    Add decorative borders:

    * **None** (default) — No borders
    * **Top** — Border above the section
    * **Bottom** — Border below the section
    * **Both** — Borders above and below
  </Accordion>
</AccordionGroup>

## Best practices

<CardGroup cols={2}>
  <Card title="API key security" icon="lock">
    Set up API key restrictions in Google Cloud Console to limit usage to your domain and prevent unauthorized use.
  </Card>

  <Card title="Accurate address" icon="location-dot">
    Use the exact address format that Google Maps recognizes. Test your address in Google Maps search first to verify it's correct.
  </Card>

  <Card title="Optimal zoom" icon="magnifying-glass-plus">
    Use zoom level 14-16 for most locations to show context (nearby streets and landmarks) while highlighting your specific location.
  </Card>

  <Card title="Full width display" icon="arrows-left-right">
    Use full width section setting for maps to maximize usability and provide better navigation experience.
  </Card>

  <Card title="Mobile testing" icon="mobile">
    Preview on mobile devices to ensure the map is easily navigable with touch gestures.
  </Card>

  <Card title="Strategic placement" icon="map-pin">
    Place the map section on your Contact page, About page, or dedicated Store Locations page for easy discovery.
  </Card>

  <Card title="Combine with text" icon="align-left">
    Add a Rich Text section above the map with hours, parking information, or public transit instructions.
  </Card>

  <Card title="API usage monitoring" icon="chart-line">
    Monitor your Google Maps API usage in Google Cloud Console to avoid unexpected charges if you exceed free tier limits.
  </Card>
</CardGroup>

## Common use cases

* **Contact pages** — Display store location so customers can find you
* **About pages** — Show company headquarters or primary location
* **Store locator pages** — Multiple map sections for different store locations
* **Event pages** — Highlight venue location for in-store events
* **Shipping/Returns pages** — Show return center or warehouse location
* **Landing pages** — Local business landing pages highlighting service areas

## Google Maps API pricing

Google Maps Embed API offers generous free tier usage:

* **Free tier:** 25,000 map loads per day
* **Pricing:** \$7 per 1,000 additional loads (after free tier)

For most small to medium businesses, the free tier is sufficient. [View current Google Maps pricing](https://mapsplatform.google.com/pricing/)

## Troubleshooting

### Map not displaying

**Common causes:**

* Invalid or missing API key
* API key restrictions blocking your domain
* Maps Embed API not enabled in Google Cloud Console
* Incorrect address format

**Solutions:**

1. Verify API key is correct and Maps Embed API is enabled
2. Check API key restrictions allow your domain
3. Test address in Google Maps to verify format
4. Check browser console for specific error messages

### Map shows wrong location

* Verify the address format matches what Google Maps expects
* Try entering additional detail (city, state, country)
* Test the exact address string in Google Maps search
* Use coordinates format: `latitude,longitude` if address lookup fails

## Related sections

<CardGroup cols={2}>
  <Card title="Rich text" icon="align-left" href="/themes/sahara/sections/rich-text">
    Add text content above the map with hours and directions
  </Card>

  <Card title="Store locator" icon="store" href="/themes/sahara/sections/store-locator">
    Advanced multi-location store finder section
  </Card>
</CardGroup>