Skip to main content
Migrate to Polaris

Version 2025-07 is the last API version to support React-based UI components. Later versions use web components, native UI elements with built-in accessibility, better performance, and consistent styling with Shopify's design system. Check out the migration guide to upgrade your extension.

Map popover

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

Support
Targets (50)

Supported targets

Anchor to MapPopoverPropsMapPopoverProps

Anchor to id
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.

Anchor to onClose
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.

Anchor to onOpen
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.

Anchor to ExamplesExamples

Anchor to Basic MapPopoverBasic MapPopover

Basic MapPopover

Example

Basic MapPopover

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

Anchor to Best PracticesBest Practices

  • Use the MapPopover component 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 MapPopover component is brief, relevant, and easy to understand.

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

Anchor to RelatedRelated

ComponentMap
ComponentMapMarker
Was this page helpful?