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.

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.

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.

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.

Publish the page changes when ready.