Skip to main content

MapSVG Gutenberg block

The MapSVG block embeds a map in the WordPress block editor with a live preview in the canvas.

Add the block

  1. Edit a page or post with the block editor
  2. Click + (inserter) and search for MapSVG
  3. Insert the MapSVG block
  1. In the placeholder, choose a map from the dropdown

The map loads in the editor with a live preview.

Block settings

With the block selected, open the right sidebar (Block settings):

SettingDescription
MapWhich MapSVG map to display
Selected Region IDOptional region ID to pre-select on load (same as shortcode selected)
Lazy loadIf enabled, the map loads when it enters the viewport on the front end only (editor always loads immediately)

Use the toolbar Change map control to clear the selection and pick another map.

Convert from shortcode

If the page already has a Shortcode block containing [mapsvg id="…"], Gutenberg can transform it into the MapSVG block. Attributes id, selected, and lazy are carried over when present.

Front end

Publish or update the page. The front end uses the same options as the block settings (id, selected, lazy).