Skip to content

Draggable Marker

Place a draggable marker on the map and display the updated coordinates when the user moves it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <script src="https://cdn.smartmaps.cloud/packages/smartmaps/smartmaps-gl/v2/umd/smartmaps-gl.min.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            html, body, #map { height: 100%; }
            #coordinates {
                position: absolute;
                bottom: 20px;
                left: 50%;
                transform: translateX(-50%);
                background: white;
                padding: 10px 20px;
                border-radius: 8px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.15);
                font-family: monospace;
                font-size: 14px;
                z-index: 1;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="coordinates">Drag the marker to see coordinates</div>
        <script>
            const map = new smartmapsgl.Map({
                apiKey: "[INSERT API-KEY]",
                container: "map",
                center: { lat: 48.7758, lng: 9.1829 },
                zoom: 13,
                style: smartmapsgl.MapStyle.ESSENTIAL
            });

            const marker = new smartmapsgl.Marker({ draggable: true, color: "#18345c" })
                .setLngLat([9.1829, 48.7758])
                .addTo(map);

            const coordsDisplay = document.getElementById("coordinates");

            function updateCoords() {
                const lngLat = marker.getLngLat();
                coordsDisplay.textContent =
                    `Lng: ${lngLat.lng.toFixed(5)}, Lat: ${lngLat.lat.toFixed(5)}`;
            }

            marker.on("dragend", updateCoords);
            updateCoords();
        </script>
    </body>
</html>