Instant Map{{title}}
{{subtitle}}
Open {{label}}Instant Map / Cards
Cards that look like they belong to your site.
Click a marker and a card opens. Start with the built-in one, restyle it with a few CSS properties, or hand over your own markup. Click any price on the maps below.
Four ways to a card
The built-in card
Fill in the marker and you are done: photo, badge, title, price and a link.
map.markers = [{
id: 1, lng: -122.42, lat: 37.77,
label: "$3,450", // the pill on the map, and the price
title: "Sunny corner flat",
subtitle: "Hayes Valley, 2 bed",
image: "/photos/1.webp", // about 560 px wide
badge: "New",
href: "/listings/1",
}];Row layout, your link text
Attributes pick the layout, the link text and where the link opens.
<instant-map
card-layout="row"
card-action="See listing"
card-target="_blank">
</instant-map>Restyled with CSS
Eleven custom properties cover size, corners, colours, type and the photo's shape.
instant-map {
--im-card-radius: 4px;
--im-card-width: 240px;
--im-card-accent: #c2410c;
--im-card-font: Georgia, serif;
--im-card-image-ratio: 16 / 9;
}Your own markup
A template inside the element. Fields are filled in as text, never as HTML.
<instant-map center="-122.42,37.77" zoom="13">
<template data-card>
<article class="my-card">
<button data-close aria-label="Close">✕</button>
<h3>{{title}}</h3>
<p>{{subtitle}}</p>
<a href="{{href}}" data-if="href">Open {{label}}</a>
</article>
</template>
</instant-map>Photos that are ready when the card opens
Fetched ahead, in idle time
Once the map settles, photos for the markers nearest the centre are fetched while the browser has nothing else to do.
Fetched on hover and on press
Pointing at a marker starts its photo, so it is usually in place before the click finishes.
Polite on slow connections
Ahead-of-time fetching is skipped when the visitor has asked to save data. Set
card-images="hover"or"off"to choose yourself.No layout jump
The photo's space is reserved from the start and the picture fades in, so the card never changes size.
For the quickest photos, serve them about 560 px wide (the card is 264 px), in WebP or AVIF, with long cache headers.
Or build the card in code
Return any element from a function, including a component from your framework. Or turn cards off and send people straight to the page.
Cards guideJavaScript
// Any element, from any framework.
map.popup = (marker) => {
const card = document.createElement("listing-card");
card.listing = marker.data;
return card;
};
// Or no card at all: go straight to the page.
map.popup = null;
map.addEventListener("markerclick", (event) => {
location.href = event.detail.marker.href;
});