Skip to content

Find Us Map Section

A street map printed in the shop's colour, the address set large, a live "Open until 18:00" readout in the shop's own time, the week's hours, nearby stations and one-tap directions — no API key.

Proeditorialminimal
Category
Sections
Added
2026-09-25
Deps
none
Updated
2026-09-25

This is a viberdy Pro component

The live preview, the props panel and the write-up are open to everyone. The full source, the AI prompt and CLI install are part of Pro.

Preview

Loading map

51.5140° N · 0.1265° W

© OpenStreetMap contributors

Visit us

14 Mercer Street
London WC2H 9QR

Opening hours
Mon09:00–18:00
Tue09:00–18:00
Wed09:00–18:00
Thu09:00–20:00
Fri09:00–20:00
Sat09:00–16:00
SunClosed
  • Covent GardenPiccadilly · 3 min walk
  • Leicester SquareNorthern · 6 min walk
  • Buses 24, 29, 176Charing Cross Road
  • Parking: NCP Brewer Street · 4 min walk

Props

16
Nearby stations + parking
No runtime dependencies
"use client";

import { useEffect, useRef, useState, useSyncExternalStore } from "react";

/**
 * The "Visit us" section: a street map printed in the shop's colour, the
 * address set large, whether it is open right now, the week's hours, the
 * nearest stations, and directions that open in the visitor's own maps app.
 *
 * THE MAP IS A PRINT, NOT A WIDGET. It is an OpenStreetMap embed (no API key,
 * no account) greyscaled, contrast-lifted and multiplied into one colour, so
 * the streets read as a duotone poster. It is inert — a map you can drag in the
 * middle of a page traps scrolling on phones and moves the street out from
 * under the pin — and the "Open in Maps" links are where interaction lives.
 *
 * IT READS LIVE. Under the address: "Open until 18:00" (or "Closing soon",
 * "Opens tomorrow 09:00"), worked out in the SHOP's time zone, with the shop's
 * own clock beside it. A minute clock re-renders it on the minute; the server

  // ---------------------------------------------------------------
  // Full source available with a viberdy Pro subscription.
  // https://viberdy.dev/pricing
  // ---------------------------------------------------------------
}
Notes

About this section

Every local business site ends with the same question — where is it, and is it open? — and most answer it with a default map widget that looks like every other site. This section treats the map as a print. An OpenStreetMap embed, which needs no API key or account, is greyscaled and multiplied into the shop's own colour, so the streets read as a two-colour poster with a single pin pulsing slowly at the door. It is deliberately not draggable: a live map in the middle of a page traps scrolling on phones, so directions open in the visitor's own Google or Apple Maps instead. Beside it, the address is set large, and under it a live line says "Open until 18:00", "Closing soon" or "Opens tomorrow 09:00", worked out in the shop's time zone with the shop's clock beside it. The week's hours, the nearest stations, a copy-address button and the phone number finish it. OpenStreetMap's credit stays visible, as its licence requires.

Curator’s note

Every local site needs a "find us" block and nearly all of them paste a default Google embed. Printing the map in the brand colour costs two CSS lines and turns the most generic section on the page into a poster.

Related

Pairs well with

Matched on shared tags and category — the entries most likely to be used alongside this one.

Featured
NewPro

Live Hours Nav

components

A small-business header that says whether the shop is open right now — computed in the shop's timezone, with overnight hours and split shifts handled.

navigationheaderopening-hours
Featured
NewPro

A price list set like a printed menu — baseline dot leaders, tabular prices, a Book link per row — beside a photo plate that follows hover, focus, or on phones the row mid-screen.

pricingmenulocal-business
Featured
NewPro

A list of text rows, each hiding a photograph that wipes open under the cursor and follows it.

galleryhoverlist