Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Map marker

The MapMarker component represents a specific location or point of interest on a map.

Support
Targets (50)

Supported targets

Anchor to MapMarkerPropsMapMarkerProps

Anchor to accessibilityLabel
accessibilityLabel
string
required

A label that describes the purpose or contents of the marker. It will be announced to users using assistive technologies and will provide them with more context.

Anchor to latitude
latitude
number
required

The latitude of the marker, in degrees. Valid values range from -90 (south pole) to 90 (north pole).

Anchor to longitude
longitude
number
required

The longitude of the marker, in degrees. Valid values range from -180 (west) to 180 (east).

Anchor to blockSize
blockSize
number

The block size (height in horizontal writing modes) of the custom icon, in pixels. Only used when the icon property is set.

Anchor to clusterable
clusterable
boolean

A flag that indicates whether the marker can be grouped into clusters when the map is zoomed out. When true, nearby markers are visually combined into a single cluster icon to reduce visual clutter at lower zoom levels.

Anchor to icon
icon
string

The URL of a custom icon image to display for the marker. When set, the default marker pin is replaced with the provided image. Use blockSize and inlineSize to control the icon's dimensions.

Anchor to inlineSize
inlineSize
number

The inline size (width in horizontal writing modes) of the custom icon, in pixels. Only used when the icon property is set.

Anchor to onPress
onPress
() => void

A callback that fires when the user presses (clicks or taps) the marker. The event does not propagate to the parent map's onPress handler.

Anchor to overlay
overlay
RemoteFragment

An overlay component to render when the user interacts with the component, such as a popover, modal, or tooltip.

Anchor to ExamplesExamples

Anchor to Basic MapMarkerBasic MapMarker

Basic MapMarker

Example

Basic MapMarker

import {
reactExtension,
Map,
MapMarker,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
'purchase.checkout.block.render',
() => <Extension />,
);

function Extension() {
return (
<Map
apiKey="YOUR_GOOGLE_MAPS_API_KEY"
latitude={-28.024}
longitude={140.887}
zoom={4}
accessibilityLabel="Map"
>
<MapMarker
latitude={-28.024}
longitude={140.887}
accessibilityLabel="Map marker for Innamincka, Australia"
/>
</Map>
);
}
import {extension, Map, MapMarker} from '@shopify/ui-extensions/checkout';

export default extension('purchase.checkout.block.render', (root) => {
const map = root.createComponent(
Map,
{
apiKey: 'YOUR_API_KEY',
accessibilityLabel: 'Map',
latitude: -28.024,
longitude: 140.887,
zoom: 4,
},
[
root.createComponent(MapMarker, {
latitude: -28.024,
longitude: 140.887,
accessibilityLabel: 'Map marker for Innamincka, Australia',
}),
],
);

root.appendChild(map);
});

Anchor to Best PracticesBest Practices

  • If your MapMarker components are interactive, make sure that the selected marker's icon is different from the rest of the non-selected markers.

  • If there are a large number of MapMarker components obscuring important features of the map, set them to clusterable to help increase the readability of the map.

Anchor to RelatedRelated

ComponentMap
ComponentMapPopover
Was this page helpful?