Skip to content
Instant Map

Quick start

View .md

1. Add the element

Section titled “1. Add the element”

No build step. Paste this into any HTML page:

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


<instant-map center="-122.4194,37.7749" zoom="12" style="height: 420px"></instant-map>

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

Section titled “2. Add markers”

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

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 to restyle it. Markers that crowd together merge into a numbered cluster, and clicking a cluster zooms into it.

3. Make it yours

Section titled “3. Make it yours”
<instant-map theme="midnight" colors="accent:ff5a5f" center="-122.4194,37.7749" zoom="12" style="height: 420px"></instant-map>

There are four built-in themes and 36 colour tokens. See Themes. To start from your brand colours instead, pass them to brandTheme(). See Customising the look.

Next

Section titled “Next”