Create a draggable Marker

Drag the Marker to a new location on a map and populates its coordinates in a display.

<!DOCTYPE html>
    <meta charset='utf-8' />
    <title>Create a draggable Marker</title>
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <script src=''></script>
    <link href='' rel='stylesheet' />
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }

.coordinates {
    background: rgba(0,0,0,0.5);
    color: #fff;
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding:5px 10px;
    margin: 0;
    font-size: 11px;
    line-height: 18px;
    border-radius: 3px;
    display: none;

<div id='map'></div>
<pre id='coordinates' class='coordinates'></pre>

mapboxgl.accessToken = '<your access token here>';
var coordinates = document.getElementById('coordinates');
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [0, 0],
    zoom: 2

var marker = new mapboxgl.Marker({
    draggable: true
    .setLngLat([0, 0])

function onDragEnd() {
    var lngLat = marker.getLngLat(); = 'block';
    coordinates.innerHTML = 'Longitude: ' + lngLat.lng + '<br />Latitude: ' +;

marker.on('dragend', onDragEnd);

Copy example