The Map display format renders a Google Maps field as an interactive map embedded directly in the post. The map is centered on the field’s saved coordinates and supports custom markers, custom styles, and per-breakpoint sizing.
This format requires the Google Maps JavaScript API key configured in ACF Pro — the block waits for ACF’s own loader rather than injecting its own script, so the API isn’t loaded twice.
Supported Field Types
The Map display format supports the following field types:
- Google Map
Customization
The Map display format exposes controls for sizing, map behavior, appearance, custom markers, and an empty-state fallback.
| Customization | Description | Note |
|---|---|---|
| Zoom Level | Initial zoom level of the map. Range matches Google Maps’ supported zoom levels. | |
| Disable Default UI | Hides all of Google Maps’ built-in controls (zoom buttons, map-type selector, Street View pegman, etc.). | |
| Disable Zoom on Scroll | Prevents the map from zooming when the visitor scrolls the page over it (uses gestureHandling: 'none'). | |
| Map Type | Switches between Google Maps base tile styles: Roadmap, Satellite, Hybrid, or Terrain. | |
| Keep Aspect Ratio | When enabled, the map maintains a fixed aspect ratio across all devices. When disabled, you set explicit heights per breakpoint instead. | |
| Map Aspect Ratio | Aspect ratio of the map viewport when Keep Aspect Ratio is enabled. | Only shown when Keep Aspect Ratio is enabled. |
| Map Height | Map height per breakpoint (desktop / tablet / mobile) in any configured CSS unit (px, %, vh, vw). | Only shown when Keep Aspect Ratio is disabled. |
| Enable Custom Map Style | Allows pasting a Snazzy Maps JSON style array to recolor and restyle the map. | Validates JSON syntax and shows an inline “Valid / Invalid” indicator. |
| Snazzy Maps JSON | The JSON style array applied when Custom Map Style is on. | Only shown when Custom Map Style is enabled. |
| Use Custom Marker | Replaces Google Maps’ default red marker with an uploaded image. | |
| Marker Image | Image selected from the Media Library; used as the marker icon. | Only shown when Use Custom Marker is enabled. |
| Marker Width / Height | Rendered marker dimensions in pixels, both bounded by the plugin’s MIN_MARKER_SIZE / MAX_MARKER_SIZE constants. | Only shown when Use Custom Marker is enabled. |
| Empty Message | Toggle (“Show message if empty”) plus fallback text shown when the field has no value (e.g., the post hasn’t set a location yet). |
The block also supports the following standard WordPress block controls: Block Alignment (left, center, right, wide, full), Border (color and width — radius is disabled because Google Maps’ canvas can’t be cleanly rounded), Shadow, and vertical Margin.