Skip to main content
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

​
Section settings

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.
Keep your API key secure. Consider setting up API key restrictions in Google Cloud Console to limit usage to your domain only.
Address query — Enter the address to display on the map.Format: street address, city state/countryExample: 123 Main Street, New York NY
If left empty, the map displays your shop’s default address from Settings > General in Shopify admin.
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)
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.
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.
Select the background color scheme for the section container (default: scheme-1). This affects the area around the map if not using full width.
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
Add decorative borders:
  • None (default) — No borders
  • Top — Border above the section
  • Bottom — Border below the section
  • Both — Borders above and below

​
Best practices

API key security

Set up API key restrictions in Google Cloud Console to limit usage to your domain and prevent unauthorized use.

Accurate address

Use the exact address format that Google Maps recognizes. Test your address in Google Maps search first to verify it’s correct.

Optimal zoom

Use zoom level 14-16 for most locations to show context (nearby streets and landmarks) while highlighting your specific location.

Full width display

Use full width section setting for maps to maximize usability and provide better navigation experience.

Mobile testing

Preview on mobile devices to ensure the map is easily navigable with touch gestures.

Strategic placement

Place the map section on your Contact page, About page, or dedicated Store Locations page for easy discovery.

Combine with text

Add a Rich Text section above the map with hours, parking information, or public transit instructions.

API usage monitoring

Monitor your Google Maps API usage in Google Cloud Console to avoid unexpected charges if you exceed free tier limits.

​
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

​
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

Rich text

Add text content above the map with hours and directions

Store locator

Advanced multi-location store finder section