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.
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Supported targets
- customer-account.
footer. render-after - customer-account.
order-index. announcement. render - customer-account.
order-index. block. render - customer-account.
order-status. announcement. render - customer-account.
order-status. block. render - customer-account.
order-status. cart-line-item. render-after - customer-account.
order-status. cart-line-list. render-after - customer-account.
order-status. customer-information. render-after - customer-account.
order-status. fulfillment-details. render-after - customer-account.
order-status. payment-details. render-after - customer-account.
order-status. return-details. render-after - customer-account.
order-status. unfulfilled-items. render-after - customer-account.
order. action. menu-item. render - customer-account.
order. action. render - customer-account.
order. page. render - customer-account.
page. render - customer-account.
profile. addresses. render-after - customer-account.
profile. announcement. render - customer-account.
profile. block. render - customer-account.
profile. company-details. render-after - customer-account.
profile. company-location-addresses. render-after - customer-account.
profile. company-location-payment. render-after - customer-account.
profile. company-location-staff. render-after - customer-account.
profile. payment. render-after
Anchor to propertiesProperties
- Anchor to accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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 apiKeyapiKeyapiKeystringstring
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 blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to idididstringstring
A unique identifier for the element.
- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to latitudelatitudelatitudenumbernumberDefault: 0Default: 0
Map center’s latitude in degrees.
- Anchor to longitudelongitudelongitudenumbernumberDefault: 0Default: 0
Map center’s longitude in degrees.
- Anchor to maxBlockSizemaxBlockSizemaxBlockSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum block size.
- Anchor to maxInlineSizemaxInlineSizemaxInlineSizeMaybeResponsive<SizeUnitsOrNone>MaybeResponsive<SizeUnitsOrNone>Default: 'none'Default: 'none'
Adjust the maximum inline size.
- Anchor to maxZoommaxZoommaxZoomnumbernumberDefault: 18Default: 18
The maximum zoom level which will be displayed on the map.
Valid zoom values are numbers from zero up to 18.
- Anchor to minBlockSizeminBlockSizeminBlockSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum block size.
- Anchor to minInlineSizeminInlineSizeminInlineSizeMaybeResponsive<SizeUnits>MaybeResponsive<SizeUnits>Default: '0'Default: '0'
Adjust the minimum inline size.
- Anchor to minZoomminZoomminZoomnumbernumberDefault: 0Default: 0
The minimum zoom level which will be displayed on the map.
Valid zoom values are numbers from zero up to 18.
- Anchor to zoomzoomzoomnumbernumberDefault: 4Default: 4
The initial Map zoom level.
Valid zoom values are numbers from zero up to 18. Larger zoom values correspond to a higher resolution.
MaybeResponsive
T | `@container${string}`SizeUnitsOrAuto
SizeUnits | "auto"SizeUnits
`${number}px` | `${number}%` | `0`SizeUnitsOrNone
SizeUnits | "none"Anchor to eventsEvents
Learn more about registering events.
- Anchor to boundschangeboundschangeboundschangeCallbackEventListener<typeof tagName, MapBoundsEvent>CallbackEventListener<typeof tagName, MapBoundsEvent>
Callback when the viewport bounds have changed or the map is resized.
- Anchor to clickclickclickCallbackEventListener<typeof tagName, MapLocationEvent>CallbackEventListener<typeof tagName, MapLocationEvent>
Callback when the user clicks on the map.
- Anchor to dblclickdblclickdblclickCallbackEventListener<typeof tagName, MapLocationEvent>CallbackEventListener<typeof tagName, MapLocationEvent>
Callback when the user double-clicks on the map.
- Anchor to viewchangeviewchangeviewchangeCallbackEventListener<typeof tagName, MapViewChangeEvent>CallbackEventListener<typeof tagName, MapViewChangeEvent>
Callback when the map view changes.
CallbackEventListener
(EventListener & {
(event: CallbackEvent<TTagName, Event> & TData): void;
}) | nullCallbackEvent
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 accessibilityLabelaccessibilityLabelaccessibilityLabelstringstring
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 blockSizeblockSizeblockSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the block size.
- Anchor to clusterableclusterableclusterablebooleanbooleanDefault: falseDefault: false
Allows grouping the marker in clusters when zoomed out.
- Anchor to commandcommandcommand'--auto' | '--show' | '--hide' | '--toggle''--auto' | '--show' | '--hide' | '--toggle'Default: '--auto'Default: '--auto'
Sets the action the
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 commandForcommandForcommandForstringstring
ID of a component that should respond to activations (e.g. clicks) on this component.
See
commandfor how to control the behavior of the target.- Anchor to inlineSizeinlineSizeinlineSizeMaybeResponsive<SizeUnitsOrAuto>MaybeResponsive<SizeUnitsOrAuto>Default: 'auto'Default: 'auto'
Adjust the inline size.
- Anchor to latitudelatitudelatitudenumbernumberDefault: 0Default: 0
Marker’s location latitude in degrees.
- Anchor to longitudelongitudelongitudenumbernumberDefault: 0Default: 0
Marker’s longitude latitude in degrees.
Anchor to eventsEvents
Learn more about registering events.
- Anchor to clickclickclickCallbackEventListener<typeof tagName>CallbackEventListener<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 graphicgraphicgraphicHTMLElementHTMLElement
The graphic to use as the marker.
If unset, it will default to the provider’s default marker.
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>