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

```tsx
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"
    />
  );
}

```

```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);
});

```

## MapProps

### MapProps

### apiKey

value: `string`

The Google Maps API key.

### latitude

value: `number`

The latitude of the center of the map.

### longitude

value: `number`

The longitude of the center of the map.

### id

value: `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.

### zoom

value: `number`

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

### minZoom

value: `number`

The minimum zoom level of the map.

### maxZoom

value: `number`

The maximum zoom level of the map.

### accessibilityLabel

value: `string`

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

### onBoundsChange

value: `(bounds: MapBounds) => void`

  - MapBounds: export interface MapBounds {
  northEast: MapLocation;
  southWest: MapLocation;
}
Callback to run when the map bounds change.

### onCenterChange

value: `(location: MapLocation) => void`

  - MapLocation: export interface MapLocation {
  latitude: number;
  longitude: number;
}
Callback to run when the map center changes.

### onPress

value: `(location: MapLocation) => void`

  - MapLocation: export interface MapLocation {
  latitude: number;
  longitude: number;
}
Callback to run when the map is pressed.

### onDoublePress

value: `(location: MapLocation) => void`

  - MapLocation: export interface MapLocation {
  latitude: number;
  longitude: number;
}
Callback to run when the map is double clicked.

### onZoomChange

value: `(zoom: MapZoom) => void`

  - MapZoom: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18
Callback to run when the map zoom changes.

### maxBlockSize

value: `MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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<T, AcceptedConditions>[];
}
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

value: `MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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<T, AcceptedConditions>[];
}
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).

### minInlineSize

value: `MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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<T, AcceptedConditions>[];
}
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).

### minBlockSize

value: `MaybeResponsiveConditionalStyle<
    number | `${number}%` | 'fill'
  >`

  - MaybeResponsiveConditionalStyle: T | ConditionalStyle<T, ViewportSizeCondition>
  - ConditionalStyle: 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<T, AcceptedConditions>[];
}
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).

### MapBounds

### northEast

value: `MapLocation`

  - MapLocation: export interface MapLocation {
  latitude: number;
  longitude: number;
}

### southWest

value: `MapLocation`

  - MapLocation: export interface MapLocation {
  latitude: number;
  longitude: number;
}

### MapLocation

### latitude

value: `number`


### longitude

value: `number`


### ConditionalStyle

### default

value: `T`

The default value applied when none of the conditional values
specified in `conditionals` are met.

### conditionals

value: `ConditionalValue<T, AcceptedConditions>[]`

  - ConditionalValue: 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;
}
An array of conditional values.

### ConditionalValue

### conditions

value: `AcceptedConditions`

The conditions that must be met for the value to be applied. At least one
condition must be specified.

### value

value: `T`

The value that will be applied if the conditions are met.

### ViewportSizeCondition

### viewportInlineSize

value: `{ min: ViewportInlineSize; }`

  - ViewportInlineSize: 'small' | 'medium' | 'large'

## Related

- [MapMarker](mapmarker)
- [MapPopover](mappopover)