# Quick start

> A working map in under a minute, with a script tag or npm.

## 1. Add the element

**Script tag**

No build step. Paste this into any HTML page:

```html
<script type="module" src="https://instantmap.org/instant-map.js"></script>

```

**npm / bun / pnpm**

```bash
npm install instantmap-js
```

```js

```

```html

```

That's a working map. The first frame is one image, and the page loads about 7 KB of JavaScript gzipped before anyone touches it. Hover or touch the map and it fetches about 11 KB more, then the interactive map takes over.

## 2. Add markers

Give each marker an `id`, a position, and whatever you want in its card:

```js
const map = document.querySelector("instant-map");

map.markers = [
  { id: 1, lng: -122.4183, lat: 37.7758, label: "$420", title: "Sunny loft", subtitle: "SoMa · 2 beds", href: "/listings/1", image: "/img/1.jpg" },
  { id: 2, lng: -122.4313, lat: 37.7694, label: "$385", title: "Garden flat", subtitle: "Mission · 1 bed", href: "/listings/2" },
];
```

A label draws a price pill. Click a pill to open its card, which shows the title, subtitle, image, label and link. See [Cards and popups](/docs/guides/popups/) to restyle it. Markers that crowd together merge into a numbered cluster, and clicking a cluster zooms into it.

## 3. Make it yours

```html

```

There are four built-in themes and 36 colour tokens. See [Themes](/docs/reference/themes/). To start from your brand colours instead, pass them to `brandTheme()`. See [Customising the look](/docs/guides/theming/#brand-colours-from-your-style-guide).

## Next

- **Use your framework's guide:** [Next.js](/docs/frameworks/nextjs/), [React](/docs/frameworks/react/), [Astro](/docs/frameworks/astro/), [Vue](/docs/frameworks/vue/), [Svelte](/docs/frameworks/sveltekit/), [Angular](/docs/frameworks/angular/), [and more](/docs/frameworks/html/). Server frameworks render the first image in the HTML, so the map paints with the page.
- **Hand it to your agent:** [Build it with an AI agent](/docs/start/ai-agents/).
- **Run your own server before launch:** [Self-hosting](/docs/guides/self-hosting/).

Source: https://instantmap.org/docs/start/quick-start
Full docs for agents: https://instantmap.org/llms-full.txt