MapBox Marker Coordinates – How to Get Dynamically with Javascript

htmljavascriptmapboxmapbox-glmapbox-gl-js

I am new to MapBox and this may be a very simple solution, what I am trying to Achieve is to get the Coordinates of the marker which pops up when I search for Any Address/Location in the Search box. The Marker is a draggable, and it should fetch the updated coordinates when moved.

Please have a look at the below code:

<html>
<head>
<meta charset="utf-8" />
<title>Locate the user</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css" rel="stylesheet" />
<style>
    body { margin: 0; padding: 0; }
    #map { position: absolute; top: 0; bottom: 0; width: 50%; }
</style>
</head>
<body>
    <script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
    <link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
    type="text/css"
    />
    <!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>


    <style>
        .coordinates {
        background: rgba(0, 0, 0, 0.5);
        color: #fff;
        position: absolute;
        bottom: 40px;
        left: 10px;
        padding: 5px 10px;
        margin: 0;
        font-size: 11px;
        line-height: 18px;
        border-radius: 3px;
        display: none;
        }
        </style>
<div id="map"></div>
<pre id="coordinates" class="coordinates"></pre>
<script>
    mapboxgl.accessToken = 'pk......';
    

    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-96, 37.8], // starting position
        zoom: 2 // starting zoom
    });

    map.addControl(new mapboxgl.NavigationControl());

    var geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        marker: {
        color: 'orange',
        draggable: true
        },
        mapboxgl: mapboxgl
        });
    
    map.addControl(geocoder);


</script>

</body>
</html>

Please add you Mapboxgl AccessToken.

Best Answer

When you select a result from the search, as it places the marker on the map, the Geocoder will also fire a 'result' event, https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on which you can listen to with:

geocoder.on('result', function(result) {
  console.log(result)
})

I don't think detecting when this is dragged is officially supported yet, but you could probably hack a solution with:

geocoder.mapMarker.on('dragend', function (e) {
  console.log(e)
})

You might need to register the listener only after the result event is triggered, by placing it inside the previous callback function.

Related Question