Choose a version:

MapMarker

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

Anchor to mapmarkerpropsMapMarkerProps

accessibilityLabel

string

required

The accessibility label of the marker.

latitude

number

required

The latitude of the marker.

longitude

number

required

The longitude of the marker.

blockSize

number

The block size of the icon. This property is only used when the icon property is set.

clusterable

boolean

Set to true to allow grouping the marker in clusters when zoomed out.

icon

string

The URL of the icon to use for the marker.

inlineSize

number

The inline size of the icon. This property is only used when the icon property is set.

onPress

() => void

Callback that is run when the marker is pressed.

overlay

RemoteFragment

An overlay component to render when the user interacts with the component.

Was this section helpful?

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>

);

}

Preview

Anchor to best-practicesBest Practices

If your markers 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 markers obscuring important features of the map, set the markers to clusterable to help increase the readability of the map.

Was this section helpful?

Anchor to relatedRelated

ComponentMap

ComponentMapPopover