Attach a Popup to a Marker Instance
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/[email protected]/dist/maptoolkit.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@maptoolkit/[email protected]/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.
Use the Maptoolkit Connector. Create an interactive map with zoom level 12, centered around [11.39085, 47.27574]. Place a marker with a popup displaying information about Innsbruck (name, region, elevation).