--- title: Map description: >- Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: - `https://*.[MERCHANT-DOMAIN].com` - `https://shop.app` - `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. 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/map md: >- https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/map.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 Use the Map component to provide visual representation of geographic data such as verifying address, package or pickup locations. Please note that the merchant or partner has to provide an API key and a set of allowed domains where the map would render. The 3 necessary domains needed are: * `https://*.[MERCHANT-DOMAIN].com` * `https://shop.app` * `https://shopify.com` Where `*` is a wildcard. Learn more about [match patterns](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns). Please refer to the [Google Maps Platform documentation](https://developers.google.com/maps/documentation/javascript/get-api-key) for more details on how to get an API key. ### 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 ## MapProps * **accessibilityLabel** **string** **required** A label that describes the purpose or contents of the map. It will be announced to users using assistive technologies and will provide them with more context. * **apiKey** **string** **required** The Google Maps API key used to authenticate requests. You can obtain a key from the [Google Maps Platform](https://developers.google.com/maps). * **latitude** **number** **required** The latitude of the center of the map, in degrees. Valid values range from -90 (south pole) to 90 (north pole). * **longitude** **number** **required** The longitude of the center of the map, in degrees. Valid values range from -180 (west) to 180 (east). * **id** **string** A unique identifier for the map. Used to set a unique map ID for the Google Maps API. If omitted, the map component automatically generates a unique identifier. If you provide one, you must ensure it is unique across all maps in the extension. * **maxBlockSize** **MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >** The maximum block size (maximum height in horizontal writing modes). The element won't grow taller than this value even if its content is longer. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's block size. * `'fill'`: Takes all the available space. Learn more about the [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size) property. * **maxInlineSize** **MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >** The maximum inline size (maximum width in horizontal writing modes). The element won't grow wider than this value. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's inline size. * `'fill'`: Takes all the available space. Learn more about the [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size) property. * **maxZoom** **number** The maximum zoom level the user can zoom in to. Prevents the map from being zoomed in beyond this level. * **minBlockSize** **MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >** The minimum block size (minimum height in horizontal writing modes). The element won't shrink smaller than this value even if its content is shorter. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's block size. * `'fill'`: Takes all the available space. Learn more about the [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size) property. * **minInlineSize** **MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' >** The minimum inline size (minimum width in horizontal writing modes). The element won't shrink narrower than this value. * `number`: The size in pixels. * `` `${number}%` ``: The size as a percentage of the parent container's inline size. * `'fill'`: Takes all the available space. Learn more about the [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size) property. * **minZoom** **number** The minimum zoom level the user can zoom out to. Prevents the map from being zoomed out beyond this level. * **onBoundsChange** **(bounds: MapBounds) => void** A callback that fires when the visible area of the map changes (for example, after the user pans the map). Receives the new bounding box as a `MapBounds` object with `northEast` and `southWest` corners. * **onCenterChange** **(location: MapLocation) => void** A callback that fires when the center point of the map changes (for example, after the user pans the map). Receives the new center as a `MapLocation` coordinate pair. * **onDoublePress** **(location: MapLocation) => void** A callback that fires when the user double-presses (double-clicks) the map. Receives the geographic `MapLocation` coordinate pair of the double-press point. * **onPress** **(location: MapLocation) => void** A callback that fires when the user presses (clicks or taps) the map. Receives the geographic `MapLocation` coordinate pair of the press point. * **onZoomChange** **(zoom: MapZoom) => void** A callback that fires when the map's zoom level changes (for example, after the user pinches to zoom or uses the zoom controls). Receives the new zoom level as a `MapZoom` value (1–18). * **zoom** **number** The initial zoom level of the map. Must be an integer between 0 and 18, where lower values show a wider area and higher values show more detail. ### MaybeResponsiveConditionalStyle A type that represents a value that can be a conditional style. The conditions are based on the viewport size. We highly recommend using the \`Style\` helper which simplifies the creation of conditional styles. ```ts T | ConditionalStyle ``` ### ConditionalStyle A conditional style definition that maps one or more conditions to different values. The \`default\` value is used as a fallback when none of the conditions in \`conditionals\` are satisfied. * conditionals An array of conditional values. ```ts ConditionalValue[] ``` * default The default value applied when none of the conditional values specified in \`conditionals\` are met. ```ts T ``` ### ConditionalValue A single conditional branch that pairs a set of conditions with the value to apply when those conditions are met. * conditions The conditions that must be met for the value to be applied. At least one condition must be specified. ```ts AcceptedConditions ``` * value The value that will be applied if the conditions are met. ```ts T ``` ### ViewportSizeCondition A condition that targets layouts based on the inline size (width in horizontal writing modes) of the viewport. * viewportInlineSize The minimum viewport inline size that the condition must match. ```ts { min: T; } ``` ### MapBounds A geographic bounding box defined by its north-east and south-west corners. Used to describe the visible area of the map. * northEast The north-east (top-right) corner of the bounding box. ```ts MapLocation ``` * southWest The south-west (bottom-left) corner of the bounding box. ```ts MapLocation ``` ### MapLocation A geographic coordinate pair representing a point on the map. * latitude The latitude of the location, in degrees. Valid values range from -90 (south pole) to 90 (north pole). ```ts number ``` * longitude The longitude of the location, in degrees. Valid values range from -180 (west) to 180 (east). ```ts number ``` ### MapZoom The zoom level of the map, as an integer between 1 and 18. Lower values show a wider area (such as a whole country), while higher values show a more detailed view (such as a street block). ```ts 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 ``` Examples ## Preview ![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/map-default-B8EoxSDW.png) ### Examples * #### Basic Map ##### React ```tsx import { reactExtension, Map, } from '@shopify/ui-extensions-react/customer-account'; export default reactExtension( 'customer-account.page.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Map} 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 showing pickup locations', latitude: -28.024, longitude: 140.887, zoom: 4, }); root.appendChild(map); }); ``` ## Related [Component - MapMarker](mapmarker) [Component - MapPopover](mappopover)