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

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 (https://drawonamap.com/)** solves.

## The fastest way to create custom map embed code

1. Open **Draw on a Map (https://drawonamap.com/)**
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 — 6 steps, no API key, no account. The map is built on OpenStreetMap (https://www.openstreetmap.org/) and renders interactive tiles that visitors can pan and zoom.

## Example iframe

```html
<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"
  allow="geolocation"
  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. Compare that to Google Maps Embed API (https://developers.google.com/maps/documentation/embed/get-started), which requires a billing account, an API key, and a per-load cost above 28,000 map loads per month.

That makes Draw on a Map a good fit if you want:

- a fast workflow
- no signup friction
- no developer setup for basic embedding
- no usage-based billing

## 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 (https://drawonamap.com/)