Google Maps in WordPress

Banner for article on how to display Google Maps in WordPress.

In WordPress, displaying Google Maps can help users find a local business and improve website visibility.

When working on Contact page layout for Fortune, we found a need to display Google map on the page.

Below is a guide on how to display Google Maps on pages, using native WordPress functionality and no additional plugins.

Embed map

First step is to get a code to embed a Google map onto a WordPress page.

Keep in mind that traffic and other map information may not be available in the embedded map.

  1. Go to Google Maps.
  2. Enter addresses to Search Google Maps.
  3. In the top left, click Menu icon.
  4. Click Share or embed map.
  5. Click Embed map.
  6. Click Copy HTML. Ignore size option since it will be set in WordPress.
Preview of Google Search location and Menu icon.
Preview of option to Share or embed map in Google Maps.
Preview of option to copy Google Maps HTML embed code.

Prepare WordPress page

Second step is to prepare a WordPress page for map.

  1. In WordPress dashboard, open existing page or create new page.
  2. In editor, add Group block.
  3. In Group, add Custom HTML block.
  4. In Custom HTML, insert Map HTML copied earlier.
Preview of Block Inserter with searched Group block.
Preview of Block Inserter with searched Custom HTML block.
Preview of a place where to insert Map HTML code.

Display map

Third step is to finish customizations of Google Map in WordPress.

  1. In Map HTML, locate width and height attributes.
  2. In width attribute, add 100% to have full width.
  3. In height attribute, add 450 to have height of 450px. Feel free to use other height value.
Preview of updated width and height attributes in HTML code.

Last step is to adapt Google Maps to Group block.

  1. Select Group block, which holds Google Map.
  2. In block sidebar settings, uncheck Inner blocks use content width in Layout.
Preview of disabled “Inner blocks use content width” option in Group block settings.

Publish the page changes when ready.