Ten listings straight out of the CMS. Each row already stores a Wander POI id.
The whole integration
// The listing page already knows which records it is rendering. Hand the
// same ids to the map — no curated list to maintain in Wander.
const map = Wander.map('#map', {
mapId: '5b40717c-…',
pois: visible.map(l => l.wanderPoiId),
showAllPois: false, // only this page's listings, not the whole map
showNumbers: false
});
// Filters change the set. setPois reloads the iframe (the embed reads its
// POIs at render) but no-ops when the set is unchanged, so wiring it to a
// live-filtering input is safe.
filter.onchange = () => map.setPois(visible.map(l => l.wanderPoiId));
// Card -> pin, and pin -> card. flyTo is camera-only; opening the embed's
// own POI card (select:true) would cover the map with detail the listing
// card already shows.
card.onclick = () => map.flyTo({ poiId, zoom: 16 });
map.on('poiSelected', ({ poiId }) => scrollCardIntoView(poiId));
// No bridge needed at all if the ids are known server-side:
// <iframe src={Wander.embedUrl({ mapId, pois })}>