---
title: MapPopover
description: >-
  MapPopover provides additional information or context about a specific
  location or point of interest on a map.
api_version: 2025-07
api_name: checkout-ui-extensions
source_url:
  html: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mappopover
  md: >-
    https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/components/interactive/mappopover.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/checkout-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/checkout/migrate-to-web-components) to upgrade your extension.

# Map​Popover

MapPopover provides additional information or context about a specific location or point of interest on a map.

### Support Targets (50)

### Supported targets

* Checkout::Actions::Render​Before
* Checkout::Cart​Line​Details::Render​After
* Checkout::Cart​Lines::Render​After
* Checkout::Contact::Render​After
* Checkout::Customer​Information::Render​After
* Checkout::Delivery​Address::Render​Before
* Checkout::Dynamic::Render
* Checkout::Pickup​Locations::Render​After
* Checkout::Pickup​Locations::Render​Before
* Checkout::Pickup​Points::Render​After
* Checkout::Pickup​Points::Render​Before
* Checkout::Reductions::Render​After
* Checkout::Reductions::Render​Before
* Checkout::Shipping​Method​Details::Render​After
* Checkout::Shipping​Method​Details::Render​Expanded
* Checkout::Shipping​Methods::Render​After
* Checkout::Shipping​Methods::Render​Before
* Checkout::Thank​You::Cart​Line​Details::Render​After
* Checkout::Thank​You::Cart​Lines::Render​After
* Checkout::Thank​You::Customer​Information::Render​After
* Checkout::Thank​You::Dynamic::Render
* purchase.​checkout.​actions.​render-before
* purchase.​checkout.​block.​render
* purchase.​checkout.​cart-line-item.​render-after
* purchase.​checkout.​cart-line-list.​render-after
* purchase.​checkout.​contact.​render-after
* purchase.​checkout.​delivery-address.​render-after
* purchase.​checkout.​delivery-address.​render-before
* purchase.​checkout.​footer.​render-after
* purchase.​checkout.​header.​render-after
* purchase.​checkout.​payment-method-list.​render-after
* purchase.​checkout.​payment-method-list.​render-before
* purchase.​checkout.​pickup-location-list.​render-after
* purchase.​checkout.​pickup-location-list.​render-before
* purchase.​checkout.​pickup-location-option-item.​render-after
* purchase.​checkout.​pickup-point-list.​render-after
* purchase.​checkout.​pickup-point-list.​render-before
* purchase.​checkout.​reductions.​render-after
* purchase.​checkout.​reductions.​render-before
* purchase.​checkout.​shipping-option-item.​details.​render
* purchase.​checkout.​shipping-option-item.​render-after
* purchase.​checkout.​shipping-option-list.​render-after
* purchase.​checkout.​shipping-option-list.​render-before
* purchase.​thank-you.​announcement.​render
* purchase.​thank-you.​block.​render
* purchase.​thank-you.​cart-line-item.​render-after
* purchase.​thank-you.​cart-line-list.​render-after
* purchase.​thank-you.​customer-information.​render-after
* purchase.​thank-you.​footer.​render-after
* purchase.​thank-you.​header.​render-after

## MapPopoverProps

* **id**

  **string**

  A unique identifier for the component.

* **onClose**

  **() => void**

  Callback to run when the Popover is closed.

* **onOpen**

  **() => void**

  Callback to run when the Popover is opened.

Examples

## Preview

![](https://cdn.shopify.com/shopifycloud/shopify-dev/development/assets/assets/images/templated-apis-screenshots/checkout-ui-extensions/2025-07/mappopover-default-DdawW0MD.png)

### Examples

* #### Basic MapPopover

  ##### React

  ```tsx
  import {
    reactExtension,
    Map,
    MapMarker,
    MapPopover,
  } 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"
      >
        <MapMarker
          latitude={-28.024}
          longitude={140.887}
          accessibilityLabel="Map marker for Innamincka, Australia"
          overlay={
            <MapPopover>
              Blue Mountains National Park store
            </MapPopover>
          }
        />
      </Map>
    );
  }
  ```

  ##### JS

  ```js
  import {
    extension,
    Map,
    MapMarker,
    MapPopover,
  } from '@shopify/ui-extensions/checkout';

  export default extension('purchase.checkout.block.render', (root) => {
    const popoverFragment = root.createFragment();
    const popover = root.createComponent(
      MapPopover,
      {},
      'Blue Mountains National Park store',
    );
    popoverFragment.appendChild(popover);
    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',
          overlay: popoverFragment,
        }),
      ],
    );

    root.appendChild(map);
  });
  ```

## Best Practices

* Use to display relevant details such as the name, address, description, or other pertinent information related to the location.

* Ensure that the content displayed in the map popover is brief, relevant, and easy to understand.

* Maintain visual consistency with the overall design of the checkout.

## Related

[Component - Map](map)

[Component - MapMarker](mapmarker)