Map Block

Map embeds an interactive map with one or more markers. Use it for a real location, office network, event venue, store directory or any content where geographic context helps the visitor.

When to use Map

Choose Map when visitors need to understand where something is or open directions. For a decorative illustration of a region, use an Image instead; for a location visitors can explore, use Map.

Configure markers

Enable Show Markers, then add and manage Map Points. Each point can store coordinates, a title, address, supporting details, opening hours, phone, directions URL and an optional image.

Use a precise title and address. Keep popup details short enough to scan, and test every phone and directions link before publishing.

Choose the point icon

Point Icon controls the symbol drawn inside every marker. Use None for the simplest marker or select a familiar icon that matches the location type. Avoid decorative icons that make the location harder to recognize.

Choose the map style

Standard, Light, Dark, Voyager, Positron, Dark Matter, Terrain and Satellite change the tile appearance. Choose a style that keeps roads and labels readable against the surrounding page.

Set the right zoom

Use a closer zoom for one building, a medium zoom for a neighborhood or city, and a wider zoom for several distant points. Verify that every important marker remains discoverable on mobile.

Properties and Style

Properties controls markers, points, icons and map tiles. Style exposes Map, Point, Location and Get Direction targets so borders, surfaces, typography and interaction states can be refined without changing the geographic data.

Set up a complete location

Open Map Points and edit a point. Enter a clear Title, Latitude, Longitude, and Address so the marker resolves to the intended place. Add Details and Schedule to give visitors useful context in the popup.

Add Phone and Directions URL for contact and navigation, then use Upload or Choose from site to attach an image. Keep the description concise and verify the schedule, phone link, directions link, and image on mobile.

Tips & tricks

1. Enter exact coordinates for the marker instead of relying on a vague city center.

2. Keep the map tall enough to explore but compact enough that the article continues naturally.

3. Use a real directions URL and verify it opens the intended destination.

4. Check the least detailed tile style at all breakpoints; labels must remain readable.

Accessibility checklist

• Repeat essential address and contact information as readable text in the point details.

• Keep marker and directions controls keyboard-accessible with visible focus.

• Do not make the map the only way to discover a location.

Common mistakes

• Using a zoom that hides nearby context or spreads markers too far apart.

• Choosing a dark or label-free style without checking readability.

• Adding empty points or broken directions links.

Quick recipe

Add the real point, verify coordinates and directions, choose a readable tile style, set an intentional zoom, then test the live map at desktop, tablet and mobile.