Building Block

Maps & Location

Google Maps embeds with custom markers, Leaflet.js OpenStreetMap with no API key required, and PHP MySQL store locators with Haversine distance search — patterns that Claude deploys in a single conversation.

Get started — from £6.99/month All building blocks

Code Patterns

Maps & location patterns

Three patterns covering static embeds, multi-marker maps with no API fees, and full PHP-backed store locators with radius search. Claude generates the HTML, CSS, JavaScript, and PHP — matched to your theme and deployed live.

Pattern 1 — Google Maps Embed with Custom Marker

A responsive Google Maps embed using the Maps JavaScript API. The map centres on your location, displays a custom SVG pin in your brand colour, and opens an info window on click with your name, address, phone number, and a directions CTA. A single API key constant in config.php covers all usage — no per-view billing for standard embeds.

Google Maps API JavaScript Custom Marker Responsive PHP Config
  • Responsive container: aspect-ratio: 16/9 with border-radius matching your card style; full-width on mobile
  • Maps JavaScript API loaded async with loading=async — no render-blocking
  • Custom SVG marker: teardrop pin shape in brand fillColor, white inner circle, scale: 1.4 on hover — defined as a google.maps.Marker with icon: { path: SVG_PATH, fillColor: '#d97757' }
  • Info window on marker click: business name (bold), address, phone as <a href="tel:">, and a “Get directions” button linking to maps.google.com/?q= URL
  • Map style: clean light style with reduced POI clutter (customisable JSON style array); dark-mode-friendly alternative style included as a comment
  • GOOGLE_MAPS_API_KEY constant read from config.php — never exposed in HTML source; PHP renders the script tag with the key
Prompt to use with Claude

Add a Google Maps embed to my contact page. Centre on [address or lat/lng]. Custom marker in brand colour [your hex]. Info window: business name "[name]", address "[address]", phone "[phone]", Get Directions button. Clean map style with reduced clutter. Responsive 16:9 container. API key in config.php as GOOGLE_MAPS_API_KEY. CSS in theme.css.

Pattern 2 — Leaflet.js Multi-Marker Map (No API Key)

An interactive map using Leaflet 1.9 and OpenStreetMap tiles — completely free, no API key, no per-view charges. Locations are loaded from a PHP/MySQL backend. Multiple markers display with custom SVG icons, clickable popups, and an optional filterable sidebar list synced to the map.

Leaflet.js OpenStreetMap PHP MySQL No API Key
  • Leaflet 1.9 loaded from CDN; OSM tile layer (openstreetmap.org/tile/{z}/{x}/{y}.png) — free for reasonable usage, attribution auto-rendered
  • Locations loaded from locations.php as JSON array: { id, name, address, lat, lng, category, url }; PHP fetches from MySQL locations table
  • Custom SVG L.divIcon markers in brand colour with category-specific emoji badge overlay; Leaflet.markercluster plugin groups pins when zoomed out
  • Popup on marker click: location name (linked to its page), address, category pill, and optional phone/hours fields
  • Sidebar list: category filter pills (All / Retail / Service / etc.), list items scroll-sync with map — clicking a list item flies the map to that marker and opens its popup
  • map.fitBounds(allMarkerBounds) auto-zooms to show all markers on load; ?category= URL param filters both map and list on initial load
  • Mobile: map full-width above the fold; sidebar list collapses below map with pull-up handle
Prompt to use with Claude

Add a Leaflet.js multi-marker map to my site using OpenStreetMap (no API key needed). Load locations from a MySQL table (columns: id, name, address, lat, lng, category). Custom SVG markers in [brand colour]. Marker clusters when zoomed out. Clickable popups with name, address, category. Sidebar list with category filter pills; clicking a list item flies to that marker. Mobile: map above, list below. CSS in theme.css, JS in main.js.

Pattern 3 — PHP Store Locator with Radius Search

A full PHP store locator: visitors enter a postcode or allow browser geolocation, choose a search radius, and get a list of nearest locations ranked by distance. Results display on a Leaflet map and a results list simultaneously. The Haversine formula runs in MySQL — no third-party geocoding API required for distance calculation.

PHP MySQL Haversine Geolocation API Leaflet.js
  • Search bar: text input for postcode/town + radius dropdown (5 / 10 / 25 / 50 km) + optional category filter; “Use my location” button triggers navigator.geolocation.getCurrentPosition()
  • Postcode geocoding: PHP calls a free geocoding API (e.g. postcodes.io for UK) to convert postcode to lat/lng; result cached in $_SESSION to avoid repeat API calls for the same postcode
  • Distance query: MySQL SELECT *, (6371 * acos(cos(radians(?)) * cos(radians(lat)) * cos(radians(lng) - radians(?)) + sin(radians(?)) * sin(radians(lat)))) AS distance FROM locations HAVING distance < ? ORDER BY distance LIMIT 20
  • Results list: each card shows location name, address, distance badge (“2.4 km away”), category pill, phone, opening hours, and a “Get directions” link
  • Map: Leaflet.js renders result markers; clicking a result card flies to its marker; clicking a marker highlights the corresponding list card
  • Zero results state: “No locations within [radius] km of [postcode]” with a prompt to increase the radius
  • Admin panel at admin/locations.php: add/edit/delete locations, bulk CSV import with lat/lng auto-lookup
Prompt to use with Claude

Build a PHP store locator. Search bar: postcode input + radius dropdown (5/10/25/50km) + Use My Location button. Geocode postcode via postcodes.io API. Calculate distances in MySQL using the Haversine formula. Results list: name, address, distance badge, phone, directions link. Leaflet.js map showing results. Clicking a list card flies to its map marker. Zero-results state prompts to increase radius. Admin panel at /admin/locations.php with add/edit/delete. CSS in theme.css, JS in main.js.

What you get

Every maps & location pattern includes

No mapping platform fees

Pattern 2 and 3 use Leaflet.js with OpenStreetMap — zero API costs for any traffic volume. Pattern 1 uses Google Maps with your own key, keeping billing transparent and under your control.

Full PHP backend included

MySQL locations table, distance queries, geocoding, and admin panels come with every pattern. Claude builds the complete backend — not just the map embed.

Accessible & responsive

All map containers adapt to mobile layouts. Keyboard users can navigate result lists; screen readers receive location data as structured list content independent of the map canvas.

Iterable in seconds

Add a location category, change the default radius, update popup content. Describe the change to Claude and it’s updated on your live site within seconds.

More building blocks

Pair with

Combine maps and location with these building blocks for complete local business and directory sites.

Booking & Scheduling

Let customers find their nearest location on a map then book an appointment — two patterns that combine into a full local service booking flow.

View patterns →

SEO & Structured Data

LocalBusiness JSON-LD with geo coordinates and opening hours — pairs directly with a map embed to maximise Google local search visibility.

View patterns →

Data Tables & Search

Filterable location directories and sortable tables that complement map-based discovery with a text-based alternative.

View patterns →

Deploy your map or locator today

From £6.99/month. First month free — no credit card required.

View pricing All building blocks