Put a map on your website

Quick start

Put this where the map should go, for example in a Find us section. Nothing else is needed: the map shows as soon as the page loads.

<iframe
  src="https://map.domaps.app/map?address=Carrer%20de%20Verdi%2032%2C%20Barcelona&name=Caf%C3%A9%20Example&primary=6f4e37&background=faf6f0&text=2b1d14&icon=coffee"
  title="Map: Café Example"
  loading="lazy"
  style="width: 100%; height: 420px; border: 0; border-radius: 16px;"></iframe>

• Settings are URL parameters. URL-encode the values: a space is %20, a comma %2C, an ampersand %26.
• Colors are hex without the # in URLs, for example 6f4e37.
• It works anywhere an iframe works, including WordPress, Wix, Squarespace and pages opened as a file. The guides show the steps for each site builder, and Learn answers general questions about maps on websites.

Div and script

The same map, with the settings as HTML attributes. The script turns each div into the iframe above. Several maps on one page are fine.

<div data-domaps
     data-address="Carrer de Verdi 32, Barcelona"
     data-name="Café Example"
     data-primary="#6f4e37" data-background="#faf6f0" data-text="#2b1d14"
     data-icon="coffee"
     style="height: 420px; border-radius: 16px; overflow: hidden;"></div>
<script type="module" src="https://domaps.app/embed.js"></script>

Settings

• Required: address or places. Everything else is optional.
• Iframe: URL parameters, colors without #. Div: the data- attribute, colors with #.

Where

Use address for one place, places for several. One of the two is required.

Colors

Take them from your site’s CSS. Without colors the map uses a neutral default look.

Look and starting view

All optional.

Saved map

Only for maps saved to an account.

match: how much of your colors the map takes

The same map in Ericeira with each value:

places: the rules

• Format: [{"name":"Shop","address":"Street 1, City"}]
• Coordinates: a place may use "lat" and "lng" (numbers) instead of "address".
• How many: up to 3 places on the Free plan, more on paid plans. Past the limit the API refuses the map, and a settings embed shows the first 3 with a DoMaps: console warning.
• Address lookup: once, when the map is saved. The result is stored as coordinates. An address that isn’t found is left out (POST /maps lists it in warnings).
• Per save: up to 25 addresses without lat and lng.

camera: the rules

• Format: five plain numbers, comma-separated, no spaces, at most 5 decimals. Example: -9.1455,38.7134,16.2,52,-18
• Easiest way: set the view in the editor and click Start from here.
• Priority: it overrides view and the fit to the pins.

A view or camera that can’t be read is ignored. The map fits the pins instead and says why in the browser console.

Examples

Several places

<div data-domaps data-primary="#b5522b" data-background="#fbf6ef" data-text="#3a2a20" data-icon="bakery"
     data-places='[{"name":"Sol","address":"Calle Mayor 12, Madrid"},{"name":"Malasaña","address":"Calle del Espíritu Santo 8, Madrid"}]'
     style="height: 460px;"></div>
<script type="module" src="https://domaps.app/embed.js"></script>

Dark website, flat map

<iframe src="https://map.domaps.app/map?address=Oranienstra%C3%9Fe%2040%2C%20Berlin&primary=7c74ff&background=0f1117&text=e6e8ef&view=flat"
        title="Map" loading="lazy" style="width: 100%; height: 420px; border: 0;"></iframe>

Tips

• Pass your site’s real colors. The map’s own colors are generated from them.
• Size: full width and 360 to 480px tall works well. Rounded corners like your site’s cards look best.
• Pin popup: the name, the address and a “Get directions” link. It opens Apple Maps on Apple devices and Google Maps elsewhere.
• What DoMaps adds to the map: on the Free plan a small “DoMaps” wordmark. Its menu has one link, “Made with DoMaps”. An unsaved map also shows a one-line save reminder under it for its first 24 hours or 100 views. Nothing else is added to the map.

Saving your map

A new map works without an account, for up to 1,000 views a month. The count resets each month.

Decide about saving before you publish your site. An unsaved map can’t be edited later: any change means making a new map.

How to save

1. 1 Make the map in the editor or with your AI agent. You get the embed code and a private save link.
2. 2 Open the save link.
3. 3 Enter your email.
4. 4 Open the login link from the email. The map is saved.

Unsaved vs saved

Where your map came from

Good to know

• Keep the save link to yourself. Never put it on your site.
• A map saved with its save link is final.
• Wrong or missing key: a save link without its key, or with a wrong one, only offers Duplicate it: the editor with the map’s settings.
• The save banner: an unsaved map shows one line under the map for its first 24 hours or 100 views, whichever comes first, reminding you to save it with its save link. The map can’t be saved from the banner. “Close” hides the banner for everyone.

Embed a saved map

A saved map embeds by its map id, shown in My maps.

<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>

<div data-domaps data-map="MAP_ID" style="height: 420px;"></div>
<script type="module" src="https://domaps.app/embed.js"></script>

Usage limits

One view is one time a page with the map opens. Views are counted per calendar month (UTC).

No extra charges, ever. Past the limit the map pauses. See pricing for the plans.

The numbers

What happens at the limit

1. 1 At 80% of the limit: You get an email.
2. 2 The first time over the limit: Saved maps keep working until the end of the month, up to twice the monthly limit. Once a year. Unsaved maps skip this step.
3. 3 After that: The map is paused until next month or an upgrade.

A paused map shows its places in place of the map: up to 5 names and addresses with “Get directions” links, in the map’s colors. A line at the bottom says why. The exact messages and what to do about each are in Troubleshooting.

Which views count

Troubleshooting

When it works:

• The pins show in your primary color.
• Clicking a pin shows the name, the address and “Get directions”.

Problems are reported in the browser console with a DoMaps: prefix.

For AI agents

• Plain-text docs: the same docs are at /llms.txt. Point your coding agent there.
• Saving stays with you: it needs the owner’s email, so the agent leaves it to you.
• Terms: maps made through the API fall under the Terms, like any other map.

Paste this into your agent:

Add a DoMaps map to the contact section of my website.
Use our address and our brand colors. Instructions: https://domaps.app/llms.txt

Path 1 (recommended): the agent creates the map

One request. No account and no API key.

1. 1

   Create the map. Colors work with or without the #. places can be a JSON list of up to 3 places on the Free plan.

   Shell

   curl -s -X POST https://api.domaps.app/maps \
     -H "Content-Type: application/json" \
     -d '{"settings":{"name":"Café Example","address":"Carrer de Verdi 32, Barcelona","primary":"#6f4e37","background":"#faf6f0","text":"#2b1d14","icon":"coffee"}}'

   The response holds the iframe for the page and a private save link:

   JSON

   {
     "id": "k3Jx9QpL2a",
     "saveKey": "SAVE_KEY",
     "iframe": "<iframe src=\"https://map.domaps.app/m/k3Jx9QpL2a\" title=\"Map: Café Example\" loading=\"lazy\" allow=\"geolocation\" style=\"width: 100%; height: 420px; border: 0; border-radius: 16px;\"></iframe>",
     "saveUrl": "https://map.domaps.app/save/k3Jx9QpL2a#SAVE_KEY",
     "warnings": []
   }

2. 2

   Check warnings. If it lists an address, the map can’t find it. The agent fixes the address and creates the map again.

3. 3

   Put iframe on the page exactly as returned.

4. 4

   Hand you the saveUrl. It never goes on the site or in the code. The agent gives it to you at the end, before the site is published, with saving first: an unsaved map can’t be edited later, and any change means making a new map. Then three steps: open the link, enter your email, open the login link from the email. You can also save it later with the same link.

• One map per site. If you want a different map before saving, the agent creates a new one and replaces the iframe.
• The save reminder is expected. The line under an unsaved map stays. The agent leaves it alone: saving is your choice.

API errors

Errors come back as JSON with the reasons in message.

Path 2: the agent can’t make HTTP requests

1. 1 The agent uses the settings embed from the Quick start.
2. 2 When it is done, before the site is published, it gives you the editor link: https://map.domaps.app/? plus the same settings. It asks you to decide about saving first, since an unsaved map can’t be edited later.
3. 3 You open the link and the map opens in the DoMaps editor. Step 3 there saves it and gives you a prompt.
4. 4 You send the prompt to your agent, and it swaps the map code on your site.

Data and credits

The map shows its attribution automatically.