Choose a version:

Map

Use Map to display a map on a page. This component is useful for displaying a map of a location, such as a store or a customer’s address.

Anchor to propertiesProperties

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose or contents of the map.

When set, it will be announced to users using assistive technologies and will provide them with more context.
Anchor to apiKey apiKey string: A valid API key for the map service provider.

The map service provider may require an API key. Without an API key the map could be hidden or render in a limited developer mode.
Anchor to blockSize blockSize <> Default: 'auto': Adjust the block size.
Anchor to id id string: A unique identifier for the element.
Anchor to inlineSize inlineSize <> Default: 'auto': Adjust the inline size.
Anchor to latitude latitude number Default: 0: Map center’s latitude in degrees.
Anchor to longitude longitude number Default: 0: Map center’s longitude in degrees.
Anchor to maxBlockSize maxBlockSize <> Default: 'none': Adjust the maximum block size.
Anchor to maxInlineSize maxInlineSize <> Default: 'none': Adjust the maximum inline size.
Anchor to maxZoom maxZoom number Default: 18: The maximum zoom level which will be displayed on the map.

Valid zoom values are numbers from zero up to 18.
Anchor to minBlockSize minBlockSize <> Default: '0': Adjust the minimum block size.
Anchor to minInlineSize minInlineSize <> Default: '0': Adjust the minimum inline size.
Anchor to minZoom minZoom number Default: 0: The minimum zoom level which will be displayed on the map.

Valid zoom values are numbers from zero up to 18.
Anchor to zoom zoom number Default: 4: The initial Map zoom level.

Valid zoom values are numbers from zero up to 18. Larger zoom values correspond to a higher resolution.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to boundschange boundschange <typeof tagName, >: Callback when the viewport bounds have changed or the map is resized.
Anchor to click click <typeof tagName, >: Callback when the user clicks on the map.
Anchor to dblclick dblclick <typeof tagName, >: Callback when the user double-clicks on the map.
Anchor to viewchange viewchange <typeof tagName, >: Callback when the map view changes.

CallbackEventListener

(EventListener & {
    (event: CallbackEvent<TTagName, Event> & TData): void;
}) | null

CallbackEvent

TEvent & {
    currentTarget: HTMLElementTagNameMap[TTagName];
}

MapBoundsEvent

bounds

{ northEast?: MapLocation; southWest?: MapLocation; }

export interface MapBoundsEvent {
    bounds?: {
        northEast?: MapLocation;
        southWest?: MapLocation;
    };
}

MapLocation

latitude
```
number
```
longitude
```
number
```

export interface MapLocation {
    latitude?: number;
    longitude?: number;
}

MapLocationEvent

location
```
MapLocation
```

export interface MapLocationEvent {
    location?: MapLocation;
}

MapViewChangeEvent

location
```
MapLocation
```
zoom
```
number
```

export interface MapViewChangeEvent extends MapLocationEvent {
    zoom?: number;
}

Was this section helpful?

Anchor to mapmarkerMapMarker

Use MapMarker to display a marker on a map. Use only as a child of s-map component.

Anchor to accessibilityLabel accessibilityLabel string: A label that describes the purpose of the marker. When set, it will be announced to users using assistive technologies and will provide them with more context.
Anchor to blockSize blockSize <> Default: 'auto': Adjust the block size.
Anchor to clusterable clusterable boolean Default: false: Allows grouping the marker in clusters when zoomed out.
Anchor to command command '--auto' | '--show' | '--hide' | '--toggle' Default: '--auto': Sets the action the commandFor should take when this clickable is activated.

See the documentation of particular components for the actions they support.

--auto: a default action for the target component.

--show: shows the target component.

--hide: hides the target component.

--toggle: toggles the target component.

--copy: copies the target ClipboardItem.
Anchor to commandFor commandFor string: ID of a component that should respond to activations (e.g. clicks) on this component.

See command for how to control the behavior of the target.
Anchor to inlineSize inlineSize <> Default: 'auto': Adjust the inline size.
Anchor to latitude latitude number Default: 0: Marker’s location latitude in degrees.
Anchor to longitude longitude number Default: 0: Marker’s longitude latitude in degrees.

Was this section helpful?

Anchor to eventsEvents

Learn more about registering events.

Anchor to click click <typeof tagName>: Callback when a marker is clicked.

It does not trigger a click event on the map itself.

Was this section helpful?

Anchor to slotsSlots

Learn more about component slots.

Anchor to graphic graphic HTMLElement: The graphic to use as the marker.

If unset, it will default to the provider’s default marker.

Was this section helpful?

Code

<s-map apiKey="YOUR_API_KEY" latitude={51.5074} longitude={-0.1278}>

<s-map-marker latitude={51.5074} longitude={-0.1278}></s-map-marker>

</s-map>

Preview

Anchor to examplesExamples

Examples of how to show a custom map marker graphic or a Popover when a map marker is clicked.

Anchor to example-map-with-graphic-as-map-markerMap with graphic as map marker

Use the graphic slot to display a graphic as a map marker. Find more about slots here.

Was this section helpful?

Popover with map marker

<s-map

apiKey="YOUR_API_KEY"

blockSize="400px"

inlineSize="400px"

latitude={37.7749}

longitude={-122.4194}

<s-map-marker

latitude={37.7749}

longitude={-122.4194}

commandFor="popover-san-francisco"

></s-map-marker>

<s-popover id="popover-san-francisco">San Francisco</s-popover>

</s-map>

Examples

Popover with map marker

Description

Use the `Popover` component to display content when a map marker is clicked.

Default

<s-map
  apiKey="YOUR_API_KEY"
  blockSize="400px"
  inlineSize="400px"
  latitude={37.7749}
  longitude={-122.4194}
>
  <s-map-marker
    latitude={37.7749}
    longitude={-122.4194}
    commandFor="popover-san-francisco"
  ></s-map-marker>
  <s-popover id="popover-san-francisco">San Francisco</s-popover>
</s-map>

Map with graphic as map marker

Description

Use the `graphic` slot to display a graphic as a map marker. Find more about slots [here](/docs/api/checkout-ui-extensions/2025-10/using-polaris-components#slots).

Default

<s-map
  apiKey="YOUR_API_KEY"
  blockSize="400px"
  inlineSize="400px"
  latitude={37.7749}
  longitude={-122.4194}
>
  <s-map-marker
    latitude={37.7749}
    longitude={-122.4194}
  >
    <s-image src="https://cdn.shopify.com/YOUR_IMAGE_HERE" slot="graphic"></s-image>
  </s-map-marker>
</s-map>

Map

Anchor to propertiesProperties

MaybeResponsive

SizeUnitsOrAuto

SizeUnits

SizeUnitsOrNone

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

MapBoundsEvent

MapLocation

MapLocationEvent

MapViewChangeEvent

Anchor to mapmarkerMapMarker

MaybeResponsive

SizeUnitsOrAuto

SizeUnits

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

Anchor to slotsSlots

Code

Examples

Code

Default

Preview

Anchor to examplesExamples

Popover with map marker

Examples

Popover with map marker

Description

Default

Map with graphic as map marker

Description

Default