Attach a Popup to a Marker Instance in Maptoolkit Maps JS
Linking a popup to a marker is done by calling marker.setPopup(popup) before adding the marker to the map, which binds the two together so clicking the marker opens the popup automatically. The popup content is set with setHTML or setDOMContent and positions itself relative to the marker’s anchor. Use this pattern to add rich tooltips or info cards to any pinned location without writing custom click handlers.
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const popup = new maptoolkit.Popup({ offset: 25 })
.setHTML('<h3>Innsbruck</h3><p>Capital of Tyrol, Austria.<br>Elevation: 574 m</p>');
new maptoolkit.Marker({ color: '#314ccd' })
.setLngLat([11.39085, 47.27574])
.setPopup(popup)
.addTo(map);<!DOCTYPE html>
<html lang="en">
<head>
<title>Attach a Popup to a Marker - Maptoolkit Maps JS</title>
<meta property="og:description" content="Attach a popup to a marker instance and display it on click." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/maps@11.0.0-beta.3/dist/maptoolkit.css" />
<style>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
#map { width: 100%; height: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
const API_KEY = 'YOUR_API_KEY';
const map = new maptoolkit.Map({
container: 'map',
apiKey: API_KEY,
style: `https://styles.maptoolkit.net/maptoolkit/maptoolkit.summer.json?api_key=${API_KEY}`,
center: [11.39085, 47.27574],
zoom: 12,
attributionControl: { compact: false }
});
map.addControl(new maptoolkit.NavigationControl(), 'top-right');
const popup = new maptoolkit.Popup({ offset: 25 })
.setHTML('<h3>Innsbruck</h3><p>Capital of Tyrol, Austria.<br>Elevation: 574 m</p>');
new maptoolkit.Marker({ color: '#314ccd' })
.setLngLat([11.39085, 47.27574])
.setPopup(popup)
.addTo(map);
</script>
</body>
</html>Use the prompt below with any LLM to get the same result. Make sure the Maptoolkit MCP server is connected first — check out AI Integration & MCP to get started.
How it works
setPopup binds the two objects, and it has to be called before addTo. Bound this way
the marker handles the toggle itself: clicking opens the popup, clicking again closes it, and
you write no event handler at all.
offset: 25 moves the popup up by 25 pixels so its tail sits at the top of the pin rather
than in the middle of it. Without an offset the popup overlaps the marker it belongs to.
setHTML inserts raw HTML, so anything user-supplied has to be escaped first or you have an
XSS hole. setText is the safe choice when the content is not yours.
color on the constructor restyles the default pin without you supplying an element.
Next steps
Content is the next step. A popup that shows a name is a start; one that shows a photo, a
link and an action is the version people actually use, and setDOMContent takes a real
element when the content has its own behaviour.
Styling matters more than it seems, because a popup inherits the page’s CSS and looks different on every site. And once there are many markers, deciding whether opening one closes the others is the difference between a map and a mess, which is the point at which opening popups from a click on the map is usually easier to manage.