Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Map Blocks

Use Map Blocks to embed Google Maps with a location pin on your site. This is a great way to display your business or event's location. It's popular to add Map Blocks to Contact pages.

Add a Map Block

To add a Map Block:

  1. Edit a page or post, click an insert point, and select Map from the menu. For help, visit Adding blocks.
  2. In the Address tab of the Map Block, add a location pin.
  3. Use the Design tab to customize the color and appearance of the map.
  4. Click Apply to save your changes.

Add a location pin

A location pin is a marker that appears at your address in the Map Block. Clicking it opens the address in Google Maps.

To add a location pin:

  1. In the Address tab of the Map Block, enter an address. When you start typing an address, the block populates a list of autocomplete suggestions powered by Google. The Business Name helps find the address, but it doesn't display on the Map Block itself.
  2. Press Enter to drop a pin of your location onto the Map Block.
  1. Under Business Address, enter an address. When you start typing an address, the block populates a list of autocomplete suggestions powered by Google. The Business Name helps find the address, but it doesn't display on the Map Block itself.
  2. Tap the address in a list to drop a pin of your location onto the Map Block.
Note: Map Blocks use information from Google Maps. If Google Maps doesn't have an address, Map Blocks won't be able to locate it. Visit Google's documentation to add a missing place or report an error. If the Map Block isn't updating even after adding an address Google Maps has, see our FAQ.

Change the design

To customize the color and appearance of the map, use the Design tab of the Map Block.

Customize the map color

Click the color drop-down menu to choose one of the following options:

  • Original - Classic Google Maps design
  • Grayscale
  • Satellite
  • Minimal Dark
  • Minimal Light
  • Minimal Blue - Displays water in blue and the rest of the map in white

Add more layers

Check the options below to add more layers to the map:

  • Show Labels - Display location names
  • Show Terrain - Display terrain features
  • Show Controls - Display zoom, direction arrows, and map scale
  1. In the block editor, tap Design.
  2. Tap Map Style and select a style from the list.
  3. You can switch the toggles for Show LabelsShow Terrain, or Show Controls on to customize the display further. 

Resize the block (computer only)

Change the Map Block's height by clicking and dragging the bottom handle.

Tip: Press and hold Shift while dragging the handle to resize the map in 20 pixel increments. This can help align the bottom of the map with another block.

When the Map Block is in a column next to another block, you can adjust its width. To learn more, visit Resizing blocks.

Change the zoom (computer only)

Visitors can zoom in by double-clicking anywhere on the Map Block, and zoom out by pressing and holding Ctrl while double-clicking on the map.

To change the default zoom level:

  1. Click Edit or the pencil icon on the Map Block.
  2. Use the method above to zoom to your desired level or, if you're on a Mac, use two-finger trackpad scrolling to zoom in and out.
  3. Click Apply to save your changes. 

FAQ

Can I add multiple location pins to the map?

Map Blocks can only display one location pin. To create maps for multiple locations, add multiple Map Blocks to a page.

Alternatively, you can embed a Google Map on your site using a Code Block. Third-party customizations like this fall outside the scope of our support. For more help, visit Google's documentation.

How do visitors use Map Blocks?

Visitors can click the pin on Map Blocks to open the address in Google Maps. In desktop browsers, visitors can click and drag to move around the map. In mobile browsers, visitors can use two fingers to move around the map.

The Map Block resizes and hides the pin on mobile devices.

Map Block resize responsively based on browser size. While this helps with your site's mobile appearance, it sometimes hides the pin on smaller browsers. If you're viewing on a desktop browser, try expanding the browser window to reveal the pin.

Preview how your map looks on smartphones and tablets with Device View

The Map Block displays incorrect information.

If you enter your address and the Map Block updates successfully but displays incorrect information, you can report it to Google directly. Click Report a Map Error in the bottom-right corner of the map.

If you enter your address but the Map Block isn't updating, try deleting the Map Block and adding a new one. If that doesn't work, contact us.

Was this article helpful?
71 out of 204 found this helpful