Skip to main content

Draggable Marker Popup

Add a draggable marker to the map.

<!DOCTYPE html>
<html lang="en">
        <meta charset="utf-8" />
        <link rel="stylesheet" href="" />
        <script src=""></script>
        body { margin: 0; padding: 0; }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;

        .map-panel {
            position: absolute;
            width: 225px;
            top: 10px;
            left: 10px;
            padding: 10px;
            background-color: #fff;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            font-family: Arial, Helvetica, sans-serif;
            font-size: .85em;

        .group {
            padding: 3px 0;

        .group .label {
            display: inline-block;
            width: 65px;
            font-style: italic;
            color: #888;

        .group .value {
            display: inline-block;
        <div id="map"></div>
        <div class="map-panel">
            <div class="group">
                <span class="label">Longitude:</span>
                <span id="longitude" class="value"></span>
            <div class="group">
                <span class="label">Latitude:</span>
                <span id="latitude" class="value"></span>

            // In this example, a draggable marker will be added to the map, and a popup will be attached to the marker.

            TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
            const center = [-87, 38];
            const map = new TrimbleMaps.Map({
                container: 'map', // container id
                center: center,
                zoom: 8

            // Create a popup
            const popup = new TrimbleMaps.Popup({
                offset: 40 // move around to map 4 borders, you will see its location changes.
            }).setText('Draggable marker with a popup');

            // Create a marker
            const marker = new TrimbleMaps.Marker({
                draggable: true

            // Save the panel elements
            const lngElem = document.getElementById('longitude');
            const latElem = document.getElementById('latitude');
            lngElem.innerHTML = center[0].toFixed(6);
            latElem.innerHTML = center[1].toFixed(6);

            // Listen to the dragend event of the marker
            marker.on('dragend', function(e){
                // Extract the lngLat object from the marker in the event
                const lngLat =;
                // Update the values in the panel
                lngElem.innerHTML = lngLat.lng.toFixed(6);
                latElem.innerHTML =;
Last updated June 15, 2023.