--- 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: checkout-ui-extensions source_url: html: https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/map md: https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/map.md --- # 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. ## MapProps * accessibilityLabel string required A label to describe the purpose of the map that is announced by screen readers. * apiKey string required The Google Maps API key. * latitude number required The latitude of the center of the map. * longitude number required The longitude of the center of the map. * id string The id of the map. This is used to set a unique map id for the Google Maps API. If you don't provide an id, the map component will automatically create a unique one for every map. If you provide it, you need to make sure it's unique. * maxBlockSize MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' > Adjust the maximum block size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space. See [MDN explanation of maxBlockSize](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size). * maxInlineSize MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' > Adjust the maximum inline size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space. See [MDN explanation of maxInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size). * maxZoom number The maximum zoom level of the map. * minBlockSize MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' > Adjust the block size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space. See [MDN explanation of minBlockSize](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size). * minInlineSize MaybeResponsiveConditionalStyle< number | \`${number}%\` | 'fill' > Adjust the minimum inline size. `number`: size in pixels. `` `${number}%` ``: size in percentages. `fill`: takes all the available space.\\ See [MDN explanation of minInlineSize](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size). * minZoom number The minimum zoom level of the map. * onBoundsChange (bounds: MapBounds) => void Callback to run when the map bounds change. * onCenterChange (location: MapLocation) => void Callback to run when the map center changes. * onDoublePress (location: MapLocation) => void Callback to run when the map is double clicked. * onPress (location: MapLocation) => void Callback to run when the map is pressed. * onZoomChange (zoom: MapZoom) => void Callback to run when the map zoom changes. * zoom number The zoom level of the map. It must be a number between 0 and 18. ### 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. To learn more check out the \[conditional styles]\(/api/checkout-ui-extensions/components/utilities/stylehelper) documentation. ```ts T | ConditionalStyle ``` ### ConditionalStyle * 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 ``` ```ts export interface ConditionalStyle< T, AcceptedConditions extends BaseConditions = Conditions, > { /** * The default value applied when none of the conditional values * specified in `conditionals` are met. */ default?: T; /** * An array of conditional values. */ conditionals: ConditionalValue[]; } ``` ### ConditionalValue * 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 ``` ```ts export interface ConditionalValue< T, AcceptedConditions extends BaseConditions = Conditions, > { /** * The conditions that must be met for the value to be applied. At least one * condition must be specified. */ conditions: AcceptedConditions; /** * The value that will be applied if the conditions are met. */ value: T; } ``` ### ViewportSizeCondition * viewportInlineSize ```ts { min: T; } ``` ```ts export interface ViewportSizeCondition { viewportInlineSize: {min: T}; } ``` ### MapBounds * northEast ```ts MapLocation ``` * southWest ```ts MapLocation ``` ```ts export interface MapBounds { northEast: MapLocation; southWest: MapLocation; } ``` ### MapLocation * latitude ```ts number ``` * longitude ```ts number ``` ```ts export interface MapLocation { latitude: number; longitude: number; } ``` ### MapZoom ```ts 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 ``` ### Examples * #### Basic Map ##### React ```tsx import { reactExtension, Map, } from '@shopify/ui-extensions-react/checkout'; export default reactExtension( 'purchase.checkout.block.render', () => , ); function Extension() { return ( ); } ``` ##### JS ```js import {extension, Map} from '@shopify/ui-extensions/checkout'; export default extension('purchase.checkout.block.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); }); ``` ## Preview ![](https://shopify.dev/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/map-default.png) ## Related [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mapmarker) [ComponentMapMarker](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mapmarker) [![](https://shopify.dev/images/icons/32/pickaxe-1.png)![](https://shopify.dev/images/icons/32/pickaxe-1-dark.png)](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mappopover) [ComponentMapPopover](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mappopover)