A map for your Framer site that matches the design

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 Framer, open the Insert menu and search for Embed.

3. 3

   Drag the Embed component onto the canvas.

4. 4

   Select it, switch to the HTML tab and paste the map code.

5. 5

   Size the component on the canvas and 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 shows on the canvas but looks cut off

Make the Embed component at least as tall as the map (420px in the editor’s code), or lower the height in the code.

Something doesn’t run in the editor

Framer runs scripts only in the browser, not in the editor. Use the iframe form, or check the published site.

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. Framer’s own help: Framer: How to add an iframe or embed script.

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