Choose a version:

MapMarker

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

Anchor to mapmarkerpropsMapMarkerProps

Anchor to accessibilityLabel accessibilityLabel string required: The accessibility label of the marker.
Anchor to latitude latitude number required: The latitude of the marker.
Anchor to longitude longitude number required: The longitude of the marker.
Anchor to blockSize blockSize number: The block size of the icon. This property is only used when the icon property is set.
Anchor to clusterable clusterable boolean: Set to true to allow grouping the marker in clusters when zoomed out.
Anchor to icon icon string: The URL of the icon to use for the marker.
Anchor to inlineSize inlineSize number: The inline size of the icon. This property is only used when the icon property is set.
Anchor to onPress onPress () => void: Callback that is run when the marker is pressed.
Anchor to overlay overlay RemoteFragment: An overlay component to render when the user interacts with the component.

MapMarkerProps

accessibilityLabel
The accessibility label of the marker.
```
string
```
blockSize
The block size of the icon. This property is only used when the `icon` property is set.
```
number
```
clusterable
Set to `true` to allow grouping the marker in clusters when zoomed out.
```
boolean
```
icon
The URL of the icon to use for the marker.
```
string
```
inlineSize
The inline size of the icon. This property is only used when the `icon` property is set.
```
number
```
latitude
The latitude of the marker.
```
number
```
longitude
The longitude of the marker.
```
number
```
onPress
Callback that is run when the marker is pressed.
```
() => void
```
overlay
An overlay component to render when the user interacts with the component.
```
RemoteFragment
```

export interface MapMarkerProps extends OverlayActivatorProps {
  /**
   * The latitude of the marker.
   */
  latitude: number;
  /**
   * The longitude of the marker.
   */
  longitude: number;
  /**
   * The accessibility label of the marker.
   */
  accessibilityLabel: string;
  /**
   * Set to `true` to allow grouping the marker in clusters when zoomed out.
   */
  clusterable?: boolean;
  /**
   * Callback that is run when the marker is pressed.
   */
  onPress?(): void;
  /**
   * The URL of the icon to use for the marker.
   */
  icon?: string;
  /**
   * The block size of the icon.
   * This property is only used when the `icon` property is set.
   */
  blockSize?: number;
  /**
   * The inline size of the icon.
   * This property is only used when the `icon` property is set.
   */
  inlineSize?: number;
}

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>

);

}

examples

Basic MapMarker

React

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

JS

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

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