View Categories

Displaying your Map on your WordPress site

1 min read

Overview #

This guide covers how to display your map on the front end of your WordPress website using either Gutenberg Blocks or the Shortcode

Setup #

Prerequisites #

The Following Plugin/s need to be installed and active

  • WP Go Maps

Displaying your map using Gutenberg blocks #

Navigate to the page you would like to display your map on, and open the page editor.

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 “Map”, a map block will be inserted onto your page.

Inserting a Map Block

Inserting a Map Block

Select the Map to be displayed in the Map dropdown on the Gutenberg block settings pane and “Update” your page. Your map will now be visible on this page on the front end.

Document image

We do not currently support preview on the back end.

For additional guidance using Gutenberg blocks, please see the following resource: Adding Gutenberg blocks

Displaying Your Map on Your WordPress Site (without Gutenberg) #

To display your map on your website, you must copy and paste the Map Shortcode to a Post or Page. The Map Shortcode can be found on the Maps page or under the General Settings of the map (WP Go Maps -> Maps (edit your chosen map) -> Settings -> General)

Shortcode on the Maps Page

Shortcode on the Maps Page

Shortcode on General Settings

Shortcode on General Settings

Copy and paste this Shortcode onto a Post or Page. It should look like this:

WM Go Maps Shortcode on page editor

WM Go Maps Shortcode on page editor

Once you’ve finished editing your post or page content, click the Publish button.

Your Map should display on the published post or page (front-end).