Build More Interactive Maps in Gutenberg
Gmap Block Pro extends the Gmap Block Gutenberg plugin with interactive tools for presenting locations, directions, and geographic data. Instead of limiting a map to one location, Pro lets you add multiple locations and give each one its own details, marker, and information window.
The block can be used in posts, pages, templates, template parts, and patterns. This makes it suitable for location pages, branch directories, contact sections, venue information, and other layouts where visitors need to explore places directly within the page.
Interactive Location Features
- Multiple locations: add as many locations as needed on one map, with individual details for each.
- Custom markers: use your own pin colours or an SVG icon.
- Info windows: attach additional information to individual markers.
- Location cards: let visitors click a card that pans and zooms the map to the related location.
- Driving directions: display directions between two points.
These tools support a more structured map experience than a single embedded location. For example, a business can show several offices, a venue site can identify important points, or a directory can connect location cards with their corresponding map markers.
Map Styling and Visitor Controls
Pro includes map styling options such as dark mode, muted palettes, and hidden points of interest. These controls can help the map fit the visual direction of the surrounding page and reduce unnecessary map detail.
The interaction controls include an option to stop the map from hijacking page scrolling. This is useful when visitors need to move through a page without the pointer being captured by map movement.
Pro also includes an SVG world map that can be coloured using your own data. This provides an alternative way to present geographic information when a conventional Google map is not the best visual format.
Google Maps API Key
The free Gmap Block embeds a Google map without an API key. Gmap Block Pro uses the Google Maps JavaScript API, so a free Google Maps API key is required for the Pro interactive features.
The plugin includes guidance for creating the key and a Test this key button in Settings → Gmap Block. The test reports whether Google accepted the key and whether the Places API (New) responded, helping identify which Google API still needs to be enabled if a Pro map is blank.
Installation and Workflow
- Install and activate Gmap Block Pro.
- Prepare a Google Maps API key for the Pro features.
- Open the Gmap Block settings and use Test this key to check the configuration.
- Add the Gmap Block to a post, page, template, template part, or pattern.
- Add locations, markers, information windows, styling, and other required map controls.
- Preview and publish the content.
Gmap Block Pro also includes priority support and automatic updates.
