Add a map to WordPress without a plugin

Get your map code

Make the map in the editor and copy the code it gives you. The editor also gives you the save link.

The code from the editor looks like this, with your map’s id in place of MAP_ID:

<iframe src="https://map.domaps.app/m/MAP_ID" title="Map: Café Example" loading="lazy" allow="geolocation"
        style="width: 100%; height: 420px; border: 0; border-radius: 16px;"></iframe>

Steps

1. 1

   Copy the map code from the DoMaps editor.

2. 2

   Open the page or post in the block editor.

3. 3

   Click the Block Inserter (+), search for “HTML” and choose Custom HTML.

4. 4

   Click Edit HTML and paste the map code. A preview shows beside it.

5. 5

   Click Update, then save or publish the page.

Save the map before you publish

A new map works without an account for up to 1,000 views a month. An unsaved map can’t be edited later, so decide about saving before you publish. A map from the editor comes with a private save link, and step 3 of the editor saves it with your email. A saved map gets 10,000 views a month on the Free plan. Keep the save link to yourself and never put it on your site.

Troubleshooting

The iframe disappears after saving

WordPress strips iframes for users without the unfiltered HTML permission, such as Contributors. Ask an Administrator or Editor to add the block. On WordPress.com, check that your plan has hosting features active.

A security plugin blocks the map

If a plugin sets a Content Security Policy, add https://map.domaps.app to its frame-src list.

The map is cut off or very small

The editor’s code makes the map 420px tall. Make the block or element at least that tall, or change height: 420px in the code. 360 to 480px works well.

The map says it is paused

It reached a view limit. The docs list each notice and what to do.

More fixes are in the docs. WordPress’s own help: WordPress.org: Custom HTML block.

Before you switch

• Replacing a Google Maps embed? Read about maps without cookies.
• See how DoMaps compares with Google Maps.
• Read: How to add a map to your website

Questions