---
title: Migrate MapPopover to the Polaris popover component
description: >-
  Learn how to migrate the MapPopover component to Polaris web components in
  checkout and customer account UI extensions.
source_url:
  html: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/map-popover
  md: >-
    https://shopify.dev/docs/apps/build/checkout/migrate-to-web-components/map-popover.md
---

# Migrate MapPopover to the Polaris popover component

The previous [`MapPopover`](https://shopify.dev/docs/api/checkout-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover) component has been replaced by the general-purpose [`<s-popover>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/popover) component in API versions 2025-10 and newer. Use `<s-popover>` as a sibling of `<s-map-marker>` and activate it with the [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/map#mapmarker-propertydetail-command) and [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/map#mapmarker-propertydetail-commandfor) props on the marker.

***

## Updated properties

The following properties are different in the Polaris popover component.

### on​Open

The previous `MapPopover` `onOpen` prop is now called [`onShow`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/popover#events-propertydetail-show). The handler now receives an `Event` instead of being called with no arguments.

### on​Close

The previous `MapPopover` `onClose` prop is now called [`onHide`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/popover#events-propertydetail-hide). The handler now receives an `Event` instead of being called with no arguments.

***

## Updated patterns

### Activation

The previous pattern of nesting `MapPopover` inside a `MapMarker` `overlay` prop has been replaced with [`command`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/map#mapmarker-propertydetail-command) and [`commandFor`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/map#mapmarker-propertydetail-commandfor) on the [`<s-map-marker>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/media-and-visuals/map#map%20marker) targeting a sibling [`<s-popover>`](https://shopify.dev/docs/api/checkout-ui-extensions/latest/web-components/overlays/popover) by ID.

| Previous pattern | New pattern |
| - | - |
| `overlay={<MapPopover>…</MapPopover>}` on `MapMarker` | `command="--toggle"` + `commandFor="popover-id"` on `<s-map-marker>` pointing to a sibling `<s-popover id="popover-id">…</s-popover>` |

**Tip:**

The `command` prop defaults to `--auto`, which resolves to `--toggle` for popovers. You can omit `command` when targeting a popover and only set `commandFor`.

## Migrating MapPopover to s-popover

##### Latest (Preact)

```tsx
import '@shopify/ui-extensions/preact';
import {render} from 'preact';

export default function extension() {
  render(<Extension />, document.body);
}

function Extension() {
  return (
    <s-map
      apiKey="YOUR_API_KEY"
      latitude={43.6532}
      longitude={-79.3832}
      accessibilityLabel="Store location"
    >
      <s-map-marker
        latitude={43.6532}
        longitude={-79.3832}
        accessibilityLabel="Flagship store"
        command="--toggle"
        commandFor="store-details"
      ></s-map-marker>
      <s-popover id="store-details">
        <s-text>620 King Street West, Toronto</s-text>
      </s-popover>
    </s-map>
  );
}
```

##### Pre-Polaris (2025-07)

```tsx
import {
  reactExtension,
  Map,
  MapMarker,
  MapPopover,
  Text,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  return (
    <Map
      apiKey="YOUR_API_KEY"
      latitude={43.6532}
      longitude={-79.3832}
      accessibilityLabel="Store location"
    >
      <MapMarker
        latitude={43.6532}
        longitude={-79.3832}
        accessibilityLabel="Flagship store"
        overlay={
          <MapPopover>
            <Text>620 King Street West, Toronto</Text>
          </MapPopover>
        }
      />
    </Map>
  );
}
```

***