I am trying to to create multiple input autocomplete search fields that function same as the demo at https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-geocoder/ . However, I do not want the Search input box to be inside the Map box, I want to have the Search field outside of the map. I have not found a good example of how to create this using the mapbox gl examples and api docs.

I am looking for something similar to Google Autocomplete feature (https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete) but in Mapbox GL where I can just reference and id (ie, id="from_address") and Mapbox will attach the autocomplete behavior.

2 Answers 2



<div id='geocoder' class='geocoder'></div>

var geocoder = new MapboxGeocoder({
    accessToken: mapboxgl.accessToken


I have similar situation where I need to place the address search box outside of mapbox map. After research a lot I am able to do that using this example of mapbox - https://www.mapbox.com/mapbox.js/example/v1.0.0/map-center-geocoding/

  • If you have another question, please ask it, rather than posing it as a question. May 25, 2017 at 8:01
  • What do you mean by - "If you have another question, please ask it" ?
    – Codextent
    May 25, 2017 at 13:49
  • 1
    I'm sorry, I misinterpreted what you were saying as: I'm also having this problem, rather than an answer. However, if you were to create a working demo in something like jsFiddle rather than linking to a Mapbox page, it would be more useful to future visitors. May 25, 2017 at 13:58

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.