How to Embed a Map on Your Website (Including Custom Routes and Annotations)

Need map embed code for your website? Here is a simple way to embed a custom interactive map with routes, circles, and notes using one iframe.

March 20, 2026 3 min read

If you are searching for terms like embed map on website, map embed code, or embed map in HTML, you usually want one of two things:

  • a normal location map for a page
  • a custom map that shows your own route, area, or notes

The second case is where most standard map embeds fall short.

A normal embed is fine if all you need is a pin. It is not enough if you need to show:

  • the entrance people should use
  • the walking path you want guests to take
  • a delivery or service area
  • a meeting point inside a large park, venue, or campus

That is exactly what Draw on a Map solves.

The fastest way to create custom map embed code

  1. Open Draw on a Map
  2. Search for the location
  3. Draw your route, circle, arrow, or notes
  4. Click Embed
  5. Copy the iframe code
  6. Paste it into your site

That is the whole workflow.

Example iframe

<iframe
  src="https://drawonamap.com/embed/#..."
  title="Draw on a Map embed"
  width="100%"
  height="420"
  style="border:0;"
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
  allowfullscreen></iframe>

The embed is responsive by default because it uses width="100%".

When a custom map embed is better than a standard one

Event and wedding pages

If guests need to find the right entrance, shuttle stop, or parking area, a plain location embed is not enough. A custom annotated map is clearer.

Real estate and travel pages

If you want to show the path from a station to an apartment, or point out a shortcut to the beach, drawing on the map beats a paragraph of directions.

Service businesses

If you need to show a rough service zone, pickup area, or route coverage, a circle or drawn boundary communicates it immediately.

Do you need an API key?

No.

With Draw on a Map, you are not wiring your own maps API. You are generating hosted embed code for the map you already created.

That makes it a good fit if you want:

  • a fast workflow
  • no signup friction
  • no developer setup for basic embedding

What keyword should this page target?

If you are publishing your own tutorial or feature page, the most realistic keyword cluster is usually:

  • embed map on website
  • map embed code
  • embed map in HTML
  • custom map embed
  • interactive map embed

Broad Google-branded queries can have more volume, but they are also more navigational and harder to win cleanly unless you are specifically teaching Google Maps itself.

Final takeaway

If the job is just “show this place,” a normal location embed can work.

If the job is “show this exact path, entrance, area, or note,” you need a custom map embed.

That is the gap Draw on a Map fills.

Create your embeddable map

Try it yourself

Draw on a Map — free, fast, no account needed.

Start Drawing →
Back to Blog