Create a Draggable Marker
A draggable marker in Maptoolkit Maps JS is created by passing draggable: true to the Marker constructor, which enables the drag interaction without any additional event handling. You can listen to the dragend event to read the marker’s new position using getLngLat. Use draggable markers in address pickers, delivery drop-off selectors, or any form where users need to choose a geographic location by dragging a pin on the map.
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 marker = new maptoolkit.Marker({ draggable: true })
.setLngLat([11.39085, 47.27574])
.addTo(map);
function updateCoords() {
const { lng, lat } = marker.getLngLat();
document.getElementById('coords').textContent = `${lng.toFixed(5)}, ${lat.toFixed(5)}`;
}
marker.on('drag', updateCoords);<!DOCTYPE html>
<html lang="en">
<head>
<title>Create a Draggable Marker - Maptoolkit Maps JS</title>
<meta property="og:description" content="Create a marker that the user can drag to a new location." />
<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%; }
#coords {
position: absolute;
bottom: 30px;
left: 10px;
background: white;
padding: 8px 14px;
border-radius: .4rem;
font-family: sans-serif;
font-size: 13px;
}
</style>
</head>
<body>
<div id="map"></div>
<div id="coords">Drag the marker</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 marker = new maptoolkit.Marker({ draggable: true })
.setLngLat([11.39085, 47.27574])
.addTo(map);
function updateCoords() {
const { lng, lat } = marker.getLngLat();
document.getElementById('coords').textContent = `${lng.toFixed(5)}, ${lat.toFixed(5)}`;
}
marker.on('drag', updateCoords);
</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 draggable marker at the center that displays its coordinates, updating as it is dragged.