---
title: MapPopover
description: >-
The MapPopover component provides additional information or context about a
specific location or point of interest on a map. Use MapPopover within a
MapMarker to display details such as a store name, address, or hours of
operation.
api_version: 2025-07
api_name: customer-account-ui-extensions
source_url:
html: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mappopover
md: >-
https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/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/customer-account-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/customer-accounts/migrate-to-web-components) to upgrade your extension.
# MapPopover
The MapPopover component provides additional information or context about a specific location or point of interest on a map. Use MapPopover within a [MapMarker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker) to display details such as a store name, address, or hours of operation.
### Support Targets (25)
### Supported targets
* CustomerAccount::KitchenSink
* [customer-account.footer.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/footer#footer-render-after-)
* [customer-account.order-index.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-targets)
* [customer-account.order-index.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-index#order-index-block-)
* [customer-account.order-status.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-announcement-)
* [customer-account.order-status.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#order-status-block-)
* [customer-account.order-status.cart-line-item.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-item-render-after-)
* [customer-account.order-status.cart-line-list.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#cart-line-list-render-after-)
* [customer-account.order-status.customer-information.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-status#customer-information-render-after-)
* [customer-account.order-status.fulfillment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#fulfillment-status-targets)
* [customer-account.order-status.payment-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#payments-and-returns-targets)
* [customer-account.order-status.return-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/payments-and-returns#return-details-render-after-)
* [customer-account.order-status.unfulfilled-items.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/fulfillment-status#unfulfilled-items-render-after-)
* [customer-account.order.action.menu-item.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-menu-item-)
* [customer-account.order.action.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/order-actions#order-action-)
* [customer-account.order.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#order-specific-full-page-)
* [customer-account.page.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/full-page#customer-account-full-page-)
* [customer-account.profile.addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-page-default-targets-)
* [customer-account.profile.announcement.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#announcement-)
* [customer-account.profile.block.render](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-default#profile-block-)
* [customer-account.profile.company-details.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#profile-page-b2b-targets-)
* [customer-account.profile.company-location-addresses.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-addresses-render-after-)
* [customer-account.profile.company-location-payment.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-payment-render-after-)
* [customer-account.profile.company-location-staff.render-after](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/targets/profile-page-b2b#company-location-staff-render-after-)
* customer-account.profile.payment.render-after
#### Use cases
* **Store details**: Show store name, address, and hours when a customer selects a map marker.
* **Pickup instructions**: Display pickup instructions or requirements for a selected location.
* **Location information**: Present relevant details about a point of interest without navigating away from the map.
* **Contact details**: Show phone numbers or directions for a selected location.
***
## Properties
Configure the following properties on the MapPopover component.
* **id**
**string**
A unique identifier for the component. Use this to target the component in scripts or stylesheets, or to distinguish it from other instances of the same component.
* **onClose**
**() => void**
A callback that fires when the popover is closed. Use this to clean up state or update the UI when the user dismisses the popover.
* **onOpen**
**() => void**
A callback that fires when the popover is opened. Use this to load additional data or update the UI when the popover becomes visible.
***
## Examples
### Add a map popover
Attach a popover to a map marker that displays when the marker is selected. This example shows a store name inside a popover connected to a [MapMarker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker).
## Add a map popover
## Add a map popover
##### React
```tsx
import {
reactExtension,
Map,
MapMarker,
MapPopover,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
);
}
```
##### JS
```js
import {
extension,
Map,
MapMarker,
MapPopover,
} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.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);
});
```
### Show store details
Display rich store information in a popover. This example renders the store name, address, and hours inside a [BlockStack](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/layout-and-structure/blockstack) within the popover.
## Show store details
##### React
```tsx
import {
reactExtension,
Map,
MapMarker,
MapPopover,
Text,
BlockStack,
} from '@shopify/ui-extensions-react/customer-account';
export default reactExtension(
'customer-account.page.render',
() => ,
);
function Extension() {
return (
);
}
```
##### JS
```js
import {extension, Map, MapMarker, MapPopover, Text, BlockStack} from '@shopify/ui-extensions/customer-account';
export default extension('customer-account.page.render', (root) => {
const name = root.createComponent(Text, {emphasis: 'bold'}, 'Downtown Manhattan');
const address = root.createComponent(Text, {}, '123 Broadway, New York');
const hours = root.createComponent(Text, {appearance: 'subdued'}, 'Open until 9 PM');
const details = root.createComponent(BlockStack, {spacing: 'extraTight'});
details.append(name);
details.append(address);
details.append(hours);
const popover = root.createComponent(MapPopover);
popover.append(details);
const popoverFragment = root.createFragment();
popoverFragment.append(popover);
const marker = root.createComponent(MapMarker, {
latitude: 40.7128,
longitude: -74.006,
accessibilityLabel: 'Downtown Manhattan store',
overlay: popoverFragment,
});
const map = root.createComponent(Map, {
apiKey: 'YOUR_GOOGLE_MAPS_API_KEY',
latitude: 40.7128,
longitude: -74.006,
zoom: 15,
accessibilityLabel: 'Map of Downtown Manhattan store',
});
map.append(marker);
root.append(map);
});
```
***
## Best practices
* **Keep content brief and relevant**: Display only essential details like the name, address, or a short description. Avoid overloading the popover with too much information.
* **Maintain visual consistency**: Ensure the popover style is consistent with the overall design of your extension.
* **Include actionable information**: When possible, include details that help customers take a next step, like directions or store hours.
***
## Limitations
* Map popovers must be used as children of the [MapMarker](https://shopify.dev/docs/api/customer-account-ui-extensions/2025-07/ui-components/media-and-visuals/mapmarker) component. They can't be rendered independently.
* The popover's display area is limited. Long content might be truncated or cause overflow.
***