# MapMarker

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

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

```

## MapMarkerProps

### MapMarkerProps

### latitude

value: `number`

The latitude of the marker.

### longitude

value: `number`

The longitude of the marker.

### accessibilityLabel

value: `string`

The accessibility label of the marker.

### clusterable

value: `boolean`

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

### onPress

value: `() => void`

Callback that is run when the marker is pressed.

### icon

value: `string`

The URL of the icon to use for the marker.

### blockSize

value: `number`

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

### inlineSize

value: `number`

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

### overlay

value: `RemoteFragment`

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

## Related

- [Map](map)
- [MapPopover](mappopover)