Add a search box with MapTiler SDK JS
This page shows how to add the Geocoding control (search box) to your map using MapTiler SDK JS. We also have tutorials for popular JS frameworks:
Alternatively, you can implement the Geocoding control with other map libraries.
Before you start
No matter which library or framework you’re going to use, you’ll need a MapTiler API key to make the control work. 👉 What’s an API key and where to get it
Configuration
The code on this page helps you build a map with a default search box. To configure the search, see these code examples and tutorials:
- Limit results by a drawn area (polygon)
- Limit results by a bounding box
- Limit results to a specific country
- Search for POIs (points of interest) near the user’s location
- Prioritize search results closer to a specific point
- Specify the search language
Other libraries
See code examples of how to use the Geocoding control with different map libraries and Javascript frameworks:
- MapTiler SDK JS
- Basic code example (this page)
- Step-by-step tutorial
- React component
- Svelte component
- Leaflet
- OpenLayers
- MapLibre GL JS
- Vanilla JS
On this page