Blocks

Blocks »Map Block

The map block allows you to add a map to any post or page on your site.

In order to add a map block, click on the Block Inserter icon.

You can also type /map and hit enter in a new paragraph block to add one quickly.

Map block - Add Typing

Detailed instructions on adding blocks can be found here.

Block Interface

Each block has its own block-specific controls that allow you to manipulate the block right in the editor. The map block offers the center alignment, add marker and more option controls.

↑ Table of Contents ↑

Editing the map

When you first add the map block, you need to create an account on Mapbox and insert your Access Token. But no worries, it’s quick and easy:

mapbox-access-token
  • Paste the Default public token you copied to your clipboard into the token field in the Map block.
  • Click Set Token.
Mapbox Access Token

The map will load with a text field for you to add a location marker.

map-block-add-location

Type the location you want to display on the map. This can be as general or specific as you wish, and the location will autocomplete as you type. Click the correct location to add it to your map.

You can then click on the red marker symbol to edit the title and caption of the marker.

map-block-edit-caption

Note that editing the address in the caption field here will not change the position of the marker, only what text is displayed on your map when the marker is clicked.

Adding Additional Location Markers

You can add additional location markers to the same map, for example, if you have a chain of restaurants, and you want to display all of their locations on one map.

To add a location marker, click the Add a Marker button and enter the location details as before.

map-block-add-marker

When you add more than one location marker, the map will zoom out to display all markers.

Map Block Multiple Markers

↑ Table of Contents ↑

Block Settings

Every block has specific options in the editor sidebar in addition to the options found in the block toolbar. If you do not see the sidebar click the ‘cog’ icon next to the Publish button.

Map Theme

To customize the appearance of your map, you can select one of the following map themes: basic, black & white, satellite or terrain.

Additionally, you can use the switcher to show street names or not.

Map Themes

Colors

You can also choose the color of the location markers.

Map Marker Colors

Markers

The Markers section lets you edit all of your markers. Editing a marker here works exactly the same as if you click on the marker itself and edit there, but using these settings may be easier if you have a lot of markers to edit. It’s also possible to delete markers on this section.

map-block-markers-settings-1

↑ Table of Contents ↑

Mapbox Access Token

In the Mapbox Access Token settings, you can update or remove your Mapbox access token. Note that if you have multiple maps on your site, removing an access token from one map will remove it from all of your maps, but your location markers will be saved, so they will still be there if you add a new access token.

Mapbox Access Token

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

The advanced section lets you add a CSS class to your block.
The advanced section lets you add a CSS class to your block.

Not quite what you're looking for?

Get Help