Add a map in your brand colors to Webflow

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

   In the Designer, open the Add panel.

3. 3

   Drag a Code Embed element onto the canvas.

4. 4

   Paste the map code into the code editor.

5. 5

   Save and close the code editor, then publish your site.

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 map doesn’t show in the Designer

Webflow shows a preview of iframes on the canvas, but some embeds only appear on the live site. Publish and check there.

You want to size the map with the Style panel

Change the map code to width: 100%; height: 100%, then give the Code Embed element a height in the Style panel.

The map stays blank and the console mentions Content Security Policy

Your site limits which pages it may frame. Add https://map.domaps.app to frame-src in its Content Security Policy.

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. Webflow’s own help: Webflow: Custom code embed.

Before you switch

• Replacing a Google Maps embed? Read about maps without cookies.
• See how DoMaps compares with Mapbox.
• Read: How to make a map match your brand colors

Questions