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.

Get an API key

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.

Adding block

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

add-google-maps-block
Inserting Google Maps block

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

Editing block

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.

google-maps-block-add-location
Entering the location you want to display on a map

Block interface

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.

google-maps-block-toolbar
Google Maps block interface toolbar

Wide alignments

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.

google-maps-wide-alignment
Google Maps wide and full block alignments

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.

sidebar-settings-google-maps-block
The Google Maps block settings in the sidebar

Map settings

google-maps-settings
Google Maps block settings
  • 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.

View mode

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.

google-maps-satelite
Google Maps satellite view

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.

google-maps-satellite-example
Google Maps satellite view example

Advanced

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.

advanced-custom-css-field
The advanced section lets you add a CSS class to your block

Last updated: 1 month ago

We use cookies to personalize your experience. By continuing to visit this website you agree to our use of cookies ― Learn more

Accept