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.

Support

Targets (29)

Supported targets

purchase.checkout.actions.render-before
purchase.checkout.block.render
purchase.checkout.cart-line-item.render-after
purchase.checkout.cart-line-list.render-after
purchase.checkout.contact.render-after
purchase.checkout.delivery-address.render-after
purchase.checkout.delivery-address.render-before
purchase.checkout.footer.render-after
purchase.checkout.header.render-after
purchase.checkout.payment-method-list.render-after
purchase.checkout.payment-method-list.render-before
purchase.checkout.pickup-location-list.render-after
purchase.checkout.pickup-location-list.render-before
purchase.checkout.pickup-location-option-item.render-after
purchase.checkout.pickup-point-list.render-after
purchase.checkout.pickup-point-list.render-before
purchase.checkout.reductions.render-after
purchase.checkout.reductions.render-before
purchase.checkout.shipping-option-item.details.render
purchase.checkout.shipping-option-item.render-after
purchase.checkout.shipping-option-list.render-after
purchase.checkout.shipping-option-list.render-before
purchase.thank-you.announcement.render
purchase.thank-you.block.render
purchase.thank-you.cart-line-item.render-after
purchase.thank-you.cart-line-list.render-after
purchase.thank-you.customer-information.render-after
purchase.thank-you.footer.render-after
purchase.thank-you.header.render-after

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.

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; }

MapLocation

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

MapLocationEvent

location
```
MapLocation
```

MapViewChangeEvent

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

Anchor to map markerMap marker

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.

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.

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.

Examples

<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

Examples

Code

Default

<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>

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/latest/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>

Was this page helpful?

Map

Supported targets

Supported targets

Anchor to propertiesProperties

MaybeResponsive

SizeUnitsOrAuto

SizeUnits

SizeUnitsOrNone

Anchor to eventsEvents

CallbackEventListener

CallbackEvent

MapBoundsEvent

MapLocation

MapLocationEvent

MapViewChangeEvent

Anchor to map markerMap marker

Anchor to eventsEvents

Anchor to slotsSlots

Preview

Examples

Code

Default

Popover with map marker

Description

Default

Map with graphic as map marker

Description

Default