I recently added Mapbox's Geocoder Control and it works wonderfully. I was wondering if anyone could tell me how I could have a marker appear at the location of the address that was searched for? Below is the code I'm currently using for the control.

.addControl(L.mapbox.geocoderControl('mapbox.places', { position: 'topright', keepOpen: false, autocomplete: false }))

3 Answers 3


Jonatas' answer works great. If you're using the goecode autocomplete, use the 'select' event instead of the 'found' event. Here is how I place a marker for the geocoded result:

    var geocoderControl = L.mapbox.geocoderControl('mapbox.places', {keepOpen: false, autocomplete: true});

    geocoderControl.on('select', function(object){
       var coord = object.feature.geometry.coordinates;
       L.marker([coord[1], coord[0]]).addTo(map);

There is a found event for this in mapbox.js. Not tested, but something like this should work:

// add the control and keep a reference to it
var geocoderControl = L.mapbox.geocoderControl('mapbox.places', { position: 'topright', keepOpen: false, autocomplete: false });

// listen for the found event and add a marker
geocoderControl.on('found', function(res) {
    var feature = res.results.features[0];

It can be done as it follows:

var geocoder_control = L.mapbox.geocoderControl('mapbox.places', {
    keepOpen: false
var map = L.mapbox.map('map', 'mapbox.streets').addControl(geocoder_control);

geocoder_control.on('select', function(object){
    var coord = object.feature.geometry.coordinates;

        type: 'Feature',
        geometry: {
            type: 'Point',
            coordinates: coord
        properties: {
            title: 'Peregrine Espresso',
            'marker-size': 'large',
            'marker-color': '#BE9A6B',
            'marker-symbol': 'cafe'


Plunker Demo

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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