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.
- 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.
Visit us
14 Mercer StreetLondon WC2H 9QR
| Mon | 09:00–18:00 |
|---|---|
| Tue | 09:00–18:00 |
| Wed | 09:00–18:00 |
| Thu | 09:00–20:00 |
| Fri | 09:00–20:00 |
| Sat | 09:00–16:00 |
| Sun | Closed |
- Covent GardenPiccadilly · 3 min walk
- Leicester SquareNorthern · 6 min walk
- Buses 24, 29, 176Charing Cross Road
- Parking: NCP Brewer Street · 4 min walk
Props
"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
// ---------------------------------------------------------------
}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.
Pairs well with
Matched on shared tags and category — the entries most likely to be used alongside this one.
Live Hours Nav
componentsA 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.
Service Price Ledger
sectionsA 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.
Hover Reveal Text Gallery
patternsA list of text rows, each hiding a photograph that wipes open under the cursor and follows it.