Skip to main content

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.

Please refer to the Google Maps Platform documentation for more details on how to get an API key.

string
required

A label to describe the purpose of the map that is announced by screen readers.

string
required

The Google Maps API key.

number
required

The latitude of the center of the map.

number
required

The longitude of the center of the map.

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.

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

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

number

The maximum zoom level of the map.

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

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

number

The minimum zoom level of the map.

(bounds: ) => void

Callback to run when the map bounds change.

(location: ) => void

Callback to run when the map center changes.

(location: ) => void

Callback to run when the map is double clicked.

(location: ) => void

Callback to run when the map is pressed.

(zoom: ) => void

Callback to run when the map zoom changes.

number

The zoom level of the map. It must be a number between 0 and 18.

Was this section helpful?

Basic Map

import {
reactExtension,
Map,
} 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 showing pickup locations"
/>
);
}

Preview