11min

Adding Gutenberg blocks

Overview

This section covers how to add Maps and map features to a page using Gutenberg blocks

Setup

Prerequisites

The Following Plugin/s need to be installed and active

  • WP Go Maps (for the Map and Store locator blocks)
  • WP Go Maps Pro addon (for all other Gutenberg blocks)

Adding a Gutenberg Block

Navigate to the WordPress page editor you would like to display the map or map feature on.

Access the page editor
Access the page editor

Toggle the block inserter, with the + icon near the top left of the page.

Toggle the block inserter
Toggle the block inserter

Scroll to the WP Google Maps section and select the Gutenberg block for the feature you'd like to be displayed on the page.

Inserting a Map Block
Inserting a Map Block

Note: If you are inserting a map block, the map will be inserted as per the map configuration. If any features are enabled for the map (store locator, marker listing, directions etc), they will be visible on the front end when this map block is inserted. If you would prefer to add a specific map features to the page using the Gutenberg block only, the corresponding feature must not be active in the Map configuration.

Available Gutenberg Blocks

  • Map - This will display you map and enables feature on your websites front end
  • Legends - This will display you Category legend on your websites front end
  • Filter - This will display your category filter on your websites front end. This Must be placed on map page. Remember to disable the category filter in your map settings (Maps > Edit > Settings > Marker Listing > Filtering)
  • Infowindow - This will display your infowindow on your websites front end. This must be placed on map page. We recommend setting "default" style in map settings (Maps > Edit > Settings > Info Windows)
  • Directions - This will display your directions on your websites front end. This must be placed on map page. Remember to disable the directions in your map settings (Maps > Edit > Settings > Directions)
  • Marker Listing - This will display your marker listing on your websites front end. This must be placed on map page. Remember to disable marker listings in your map settings (Maps > Edit > Settings > Marker Listing)
  • Store Locator - This will display your Store Locator on your websites front end. If used on map page, remember to disable the store locator in your map settings (Maps > Edit > Settings > Store Locator)

ο»Ώ

ο»Ώ

ο»Ώ

ο»Ώ

ο»Ώ

Updated 13 Jul 2022
Did this page help you?
Yes
No