JavaScript Maps SDK

Draggable Marker Popup

Add a draggable marker to the map. 

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.css" />
        <script src="https://maps-sdk.trimblemaps.com/v4/trimblemaps-4.2.2.js"></script>
        <style>
        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;
        }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div class="map-panel">
            <div class="group">
                <span class="label">Longitude:</span>
                <span id="longitude" class="value"></span>
            </div>
            <div class="group">
                <span class="label">Latitude:</span>
                <span id="latitude" class="value"></span>
            </div>
        </div>

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

            TrimbleMaps.setAPIKey('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
            }).setLngLat(center)
            .setPopup(popup)
            .addTo(map);

            // 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 = e.target.getLngLat();
                // Update the values in the panel
                lngElem.innerHTML = lngLat.lng.toFixed(6);
                latElem.innerHTML = lngLat.lat.toFixed(6);
            });
        </script>
    </body>
</html>
Last updated August 23, 2024.