Google Maps Block

Last updated 12 days ago

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.

To add a map, click on the Add Block button and select the Google Maps block. Alternatively, you can start typing /map in a new paragraph block, then select Google Maps from the drop-down list.

Use the slash command /map then select Google Maps from the drop-down list

Detailed instructions on adding blocks can be found here.

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 API

Google now requires an API key to use their maps on your site. Detailed instructions provided within the documentation will help you in acquiring a key quickly and easily.

Alignment

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 exclusively available within the Conj - eCommerce WordPress Theme which supports these alignments in any fluid width page template.

Adding Location

Right after adding the Google Maps block to your page a text field will appear which 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.

Entering the location you want to display on the Google Maps block

Map 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 iframe's height attribute.

Satellite View

This is another option in the Google Maps block’s toolbar. Choosing the satellite icon will enable you to alter the view mode within your map block. It is also possible to do these things in the block itself.

The example below uses the optional maptype parameter to display a satellite view of the map.

In addition to the options found in the block’s toolbar, you may locate the block specific settings in the editor sidebar panel. Clicking on the cog icon next to the publish button will toggle the visibility of this panel.

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.