1

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.

Improve this question

1 Answer 1

Reset to default
2

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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.