Put what is nearby on your own listing pages.

Live, on a listing page

A listing card the way your visitors see one, with the panel behind the button. Press it and the real panel opens over the page on a real address, the same way it does on the sites people browse today.

The snippet

Drop this where the panel should sit, with the listing's coordinates in place of the placeholders. That is the whole integration.

<iframe
  src="https://www.listingmap.site/?portal=1&lat={{lat}}&lng={{lng}}"
  title="What is nearby"
  loading="lazy"
  width="100%"
  height="640"
  style="border:0"
  referrerpolicy="strict-origin-when-cross-origin"
></iframe>

Parameters

• lat, lngThe listing's coordinates in decimal degrees.lat=51.4893&lng=-0.1334
• addrA postal address, used when you do not store coordinates. Geocoded on our side.addr=Lupus Street, London SW1V
• portalAlways 1. Hides sign-in, saving and upgrade prompts, so the panel reads as part of your page.portal=1
• basemapgoogle switches the map tiles to Google Maps. Leave it out for the default vector map.basemap=google
• themeaccent takes a hex colour for buttons and highlights, font a font family. Applied to the panel only.theme=accent:#d85a30,font:Inter
• hideTabs to leave out: any of nearby, costs, safety, area, places. The chips that open a hidden tab go with it.hide=area,costs

theme and hide only do anything when portal=1 is set. A visitor who opens the standalone app never sees them.

What is inside

• Travel times to the places that matterA visitor adds their office or their child's school once. Every listing after that shows the door-to-door time by public transport, cycling, walking and car.SourceGoogle Directions
• What is nearby, one tapGyms, stations, bus stops, supermarkets, schools and parks around the listing, ranked by distance with the route drawn on the map. Free text search for anything else.SourceGoogle Places
• True monthly costFor rentals in England: rent plus council tax, energy and water, so the visitor sees what the month costs rather than the rent alone.Sourcegov.uk council tax bands, the property's EPC at the Ofgem cap, the local water supplier's tariff
• Crime, against the city meanReported crime around the listing on a hex grid, read against the city average, with a plain verdict and the caveats that go with police data.Sourcepolice.uk open data
• What locals sayA short brief on the area: what residents like, what they complain about, and where. Every claim carries a dated, linked quote.SourcePublic forum posts, curated by hand and linked to source
• The homes they have already seenA running list of the listings a visitor has opened, kept in their browser, so they get back to the ones they liked without another search.SourceTheir own browsing, stored locally

How it behaves

• Loads on click, not on paintPut the iframe behind a button or tab, as the demo above does. Page weight and Core Web Vitals stay as they were until a visitor asks for the panel.
• No cookies before consentThe panel sets no cookies in portal mode. Analytics is cookieless and aggregate. Nothing is stored on the visitor's device until they choose to save a place, and even then it stays in their browser.
• Google attribution stays visiblePlaces and routes carry their Google credit, and the map keeps its own attribution line. A theme can recolour the panel but cannot hide either.
• ThemeablePass your accent colour and font family in the theme parameter. Drop the tabs you do not want with hide.
• Reports its heightIn portal mode the panel posts a listingmap:height message whenever its content changes, so your page can size the frame and avoid a scrollbar inside a scrollbar.

Sizing the frame

Give the iframe an id and listen for the message. The height is the panel's full content height in CSS pixels.

window.addEventListener("message", (e) => {
  if (e.origin !== "https://www.listingmap.site") return;
  if (e.data?.type !== "listingmap:height") return;
  document.getElementById("listingmap").style.height = e.data.height + "px";
});