<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Draggable Marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css' rel='stylesheet' />
<style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>
<body>
<style>
        .marker {
            display: block;
            border: none;
            cursor: pointer;
            padding: 0;
            width: 50px;
            height: 50px;

        }

        .coordinates {
            background: rgba(0, 0, 0, 0.7);
            color: #fff;
            position: absolute;
            bottom: 40px;
            left: 10px;
            padding: 5px 10px;
            margin: 0;
            font-size: 14px;
            line-height: 18px;
            border-radius: 3px;
            display: none;
        }
    </style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
        //Add your LocationIQ Maps Access Token here (not the API token!)
        locationiqKey = 'pk.a5c3fbf2119bfb2275b62eddbccd76b3';
        
        var coordinates = document.getElementById('coordinates');
        
        //Define the map and configure the map's theme
        var map = new mapboxgl.Map({
            container: 'map',
            center: [-122.42, 37.779],
            style: 'https://tiles.locationiq.com/v3/streets/vector.json?key='+locationiqKey,
            zoom: 12,
            center: [-122.42, 37.779]
        });
            
        // First create DOM element for the marker
        var el = document.createElement('div');
        el.className = 'marker';
        el.id = 'marker';
        // Set marker properties using JS
        el.style.backgroundImage = 'url(marker50px.png)';

        var marker = new mapboxgl.Marker(el, {
            draggable: true
        }).setLngLat([-122.444733, 37.767443])
          .addTo(map);

        // After the mouse is released the following function is executed which updates the displayed lat and long
        function onDragEnd() {
            var lngLat = marker.getLngLat();
            coordinates.style.display = 'block';
            coordinates.innerHTML =
                'Latitude: ' + lngLat.lat + '<br />Longitude: ' + lngLat.lng;
        }

        marker.on('dragend', onDragEnd);
    </script>
</body>
</html>