Map
Display an interactive or static location map
With the map section in Broadcast, you can display an interactive map for your customers.
Broadcast supports the Google Maps API to display a store's location easily. Alternatively, you can use any static image to display a location.
Example map styles
When using your Google Maps API key, Broadcast will automatically generate an interactive map with the address you provide. Broadcast also includes multiple map styles. Here are some examples:
The default style displays the standard Google Maps colors:
Section settings
This section can use the Google Map API for rich interactive maps or add any image from your store library to display a location. You can choose from different map styles and zoom levels when using the Map API key.
Map address
text
The address Google Maps uses to determine coordinates.
Zoom
range
Controls map zoom level. Lower zoom = wider area; higher zoom = closer view.
Map style
select
Visual theme of the map. Options: Default, Minimal, Light, or Dark.
Image
image_picker
Fallback image if map fails to load. Recommended: 3200×1200px JPG
Location correction
Enable location correction
checkbox
If enabled, overrides Google’s coordinates using manual lat/long
Latitude
text
Latitude value.
Longitude
text
Longitude value.
Typography
Heading
text
Section heading.
Heading size
select
Size of the heading. Options: Mini, Extra small, Small, Medium, Large, or Extra large.
Address and hours
richtext
Text area for address and business hours
Map link label
text
Label for the button linking to map directions.
Button
Color
select
Button color style. Options: Black, White, Primary, or Secondary.
Size
select
Size of the button. Options: Small, Medium, or Large.
Style
select
Style of the button. Options: Solid, Outline, or Text.
Show arrow
checkbox
Toggles an arrow icon next to the button text
Desktop
Height
select
Height of the map section on desktop. Various screen ratio and pixel options
Mobile
Height
select
Height of the map section on mobile. Matches desktop height options
Colors
Color scheme
color_scheme
Applies selected color scheme.
Width
select
Section width. Options: Full width, Full width padded.
Padding
Top
range
Padding above the section.
Bottom
range
Padding below the section.
Advanced
Heading SEO tag
select
Sets the HTML heading tag: H1–H6, or Automatic.
Video Overview
This video demonstrates how to set up a Google Maps API key and also configure the section settings for the Map section:
Register a key
Shopify's article will help you get started with the links to the Google Dashboard:
Last updated