--- title: MapMarker description: >- The MapMarker component represents a specific location or point of interest on a map. Use MapMarker within a Map component to highlight addresses, stores, or delivery points. 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. # MapMarker The MapMarker component represents a specific location or point of interest on a map. Use MapMarker within a [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map) component to highlight addresses, stores, or delivery points. Markers support popovers for displaying details, clustering for dense maps, and custom icons for visual differentiation. ### Support Targets (25) ### Supported targets * Customer​Account::Kitchen​Sink * [customer-account.​footer.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-) * [customer-account.​order-index.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets) * [customer-account.​order-index.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-) * [customer-account.​order-status.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-) * [customer-account.​order-status.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-) * [customer-account.​order-status.​cart-line-item.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-) * [customer-account.​order-status.​cart-line-list.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-) * [customer-account.​order-status.​customer-information.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-) * [customer-account.​order-status.​fulfillment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets) * [customer-account.​order-status.​payment-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets) * [customer-account.​order-status.​return-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-) * [customer-account.​order-status.​unfulfilled-items.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-) * [customer-account.​order.​action.​menu-item.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-) * [customer-account.​order.​action.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-) * [customer-account.​order.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-) * [customer-account.​page.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-) * [customer-account.​profile.​addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-) * [customer-account.​profile.​announcement.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-) * [customer-account.​profile.​block.​render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-) * [customer-account.​profile.​company-details.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-) * [customer-account.​profile.​company-location-addresses.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-) * [customer-account.​profile.​company-location-payment.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-) * [customer-account.​profile.​company-location-staff.​render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-) * customer-account.​profile.​payment.​render-after #### Use cases * **Store markers**: Mark store or warehouse locations on a map for pickup or delivery. * **Delivery pins**: Highlight the customer's delivery destination on order tracking maps. * **Multi-location selection**: Let customers choose from several locations by tapping different markers. * **Location clustering**: Group nearby markers to prevent visual clutter on dense maps. *** ## Properties Configure the following properties on the MapMarker component. * **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, such as a popover, modal, or tooltip. *** ## Examples ### Add a map marker Place a marker on a map at a specific latitude and longitude. This example pins a single location with an accessibility label describing the place. ## Add a map marker ![A map with a single marker pinpointing a location.](https://shopify.dev/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mapmarker-default-0wtGfXkb.png) ## Add a map marker ##### React ```tsx import { reactExtension, Map, MapMarker, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### 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); }); ``` ### Mark store locations Display multiple markers on a map with `clusterable` enabled. This example shows three store locations in New York City. When markers overlap at low zoom levels, they group into a cluster indicator. ## Mark store locations ##### React ```tsx import { reactExtension, Map, MapMarker, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Map, MapMarker} from '@shopify/ui-extensions/customer-account'; export default extension('customer-account.page.render', (root) => { const locations = [ {lat: 40.7128, lng: -74.006, label: 'Downtown Manhattan store'}, {lat: 40.7549, lng: -73.984, label: 'Midtown Manhattan store'}, {lat: 40.7282, lng: -73.7949, label: 'Queens store'}, ]; const map = root.createComponent(Map, { apiKey: 'YOUR_GOOGLE_MAPS_API_KEY', latitude: 40.73, longitude: -73.99, zoom: 11, accessibilityLabel: 'Map of New York City stores', }); locations.forEach(({lat, lng, label}) => { map.append(root.createComponent(MapMarker, { latitude: lat, longitude: lng, accessibilityLabel: label, clusterable: true, })); }); root.append(map); }); ``` *** ## Best practices * **Use distinct icons for interactive markers**: Make sure the selected marker's icon is visually different from non-selected markers so customers can identify their selection. * **Cluster markers for dense maps**: If there are many markers obscuring important features, set the markers to `clusterable` to improve readability. * **Provide descriptive labels**: Each marker should convey its purpose, such as a store name or address. *** ## Limitations * Map markers must be used as children of the [Map](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map) component. They can't be rendered independently. * Custom marker icons are limited to the options provided by the component. ***