Map Block

The Map Block allows you to display a Google Map in the Gutenberg editor. You can create maps with custom icons, tooltips, description, zoom levels and much more.

How to add a Google Maps block

To use the Map block, you need to add a Google API key in the Advanced Gutenberg “Configuration” area.

Click here for Google's official guide to getting an API key. They ask you to do the following:

1. Go to the Google Cloud Platform Console.
2. Click the project drop-down and select or create the project for which you want to add an API key.
3. Click the menu button and select APIs & Services > Credentials.
4. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.
5. The new API key is listed on the Credentials page under API keys.

Once you have added your API key, you can create the map by clicking on the Map button in the Advanced Gutenberg category:

Settings for the Map block

From the right panel, you can add a location in two ways:

1. Input the Latitude and Longitude, or
2. Enter an Address and then press the “Fetch Location” button.

Some additional options for the map are available:

• Zoom level
• Height
• Marker Icon
• Marker Title
• Marker description
• Open marker tooltip
• Map styles: silver, retro, night, … and you can add your custom style also.

Default settings for all your Map blocks

You can set default options for every Map Box block added to your site. This is possible with the Default Blocks Config feature and it allows you to create a consistent look-and-feel for all your maps.

• Go to Adv. Gutenberg in your WordPress admin menu.
• Click Configuration, then Default Blocks Config.
• Click Map.