---
title: MapMarker
description: MapMarker represents a specific location or point of interest on a map.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker
  md: >-
    https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker.md
---

Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use [web components](https://shopify.dev/docs/api/customer-account-ui-extensions/latest/polaris-web-components), native UI elements with built-in accessibility, better performance, and consistent styling with [Shopify's design system](https://shopify.dev/docs/apps/design). Check out the [migration guide](https://shopify.dev/docs/apps/build/customer-accounts/migrate-to-web-components) to upgrade your extension.

# Map​Marker

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

### Support Targets (25)

### Supported targets

* Customer​Account::Kitchen​Sink
* 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

## MapMarkerProps

* **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.

* **latitude**

  **number**

  **required**

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

* **longitude**

  **number**

  **required**

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

* **blockSize**

  **number**

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

* **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.

* **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.

* **inlineSize**

  **number**

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

* **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.

* **overlay**

  **RemoteFragment**

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

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mapmarker-default-0wtGfXkb.png)

### Examples

* #### Basic MapMarker

  ##### React

  ```tsx
  import {
    reactExtension,
    Map,
    MapMarker,
  } from '@shopify/ui-extensions-react/customer-account';

  export default reactExtension(
    'customer-account.page.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

  ```js
  import {extension, Map, MapMarker} from '@shopify/ui-extensions/customer-account';

  export default extension('customer-account.page.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);
  });
  ```

## Best 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.

## Related

[Component - Map](map)

[Component - MapPopover](mappopover)