Google Maps block

The Google Maps block enables you to display a map pin at a particular place or address, such as a landmark, business, geographic feature, or town.

Google requires an API key to display maps on a website. Acquiring an API key is free and allows up to 25,000 requests per day, and you will not be billed unless usage goes over the free number of views.

The Google Maps Platform API requires authentication — requests explicitly made on behalf of user’s Google account. Authenticated requests require an api-key.

To add a map, click on the ⊕ Block Inserter icon and select the “Google Maps” block.

Alternatively, you can start typing /map in a new paragraph block, then press enter.

Once you insert a map block, a text field will appear that enables you to type the location you want to display on the map. This can be as general or specific as you wish, and the location will update on the map as you type.

To reveal the block toolbar, you can click on the block, and the toolbar will display. Each block comes with unique toolbar icons and specific user controls that allow you to manipulate the block right in the editor.

If you wish for the map to be emphasized on the page, the Wide and Full-Width options will expand the map block beyond the bounding column of the page.

These two options are available in any fluid width page or post template.

Clicking on the ⚙ cog icon next to the publish button will toggle the visibility of this panel.

• Zoom — Sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings).
• Height — Control the size of the map with the height attribute of the iframe.

This is another option in the Google Maps block’s toolbar. Choosing the satellite icon will enable you to alter the view mode in your map block.

It is also possible to alter the view mode from the block toolbar itself. The example below uses the optional maptype parameter to display a satellite view of the map.

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