---
title: "Geocoding control (place search box) | Geocoding | JavaScript maps SDK"
description: "Implement a complete place search box in your app."
---

> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.

# Geocoding control (place search box)

 ![NpmLogo](https://docs.maptiler.com/assets/img/npm.svg) [Get it from npm registry](https://www.npmjs.com/package/@maptiler/geocoding-control)  
![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg) [View source code on GitHub](https://github.com/maptiler/maptiler-geocoding-control)

The geocoding control implements a complete [**place search**](https://docs.maptiler.com/guides/developer/location-services/geocoding-search/) in your map or other frontend application. This page explains how to implement it with [MapTiler SDK JS](https://docs.maptiler.com/sdk-js/).

## Get started

For the most basic integration, see the code example [Add place search to map](https://docs.maptiler.com/sdk-js/examples/geocoder-component/).

If you’re using a JS framework like React or Svelte, get tailored instructions in these tutorials:

-   [React component](https://docs.maptiler.com/react/sdk-js/geocoding-control/)
-   [Svelte component](https://docs.maptiler.com/svelte/sdk-js/geocoding-control/)

You can also go to [GitHub](https://github.com/maptiler/maptiler-geocoding-control) or [npm](https://www.npmjs.com/package/@maptiler/geocoding-control) for integration details.

## Configure search

To customize the geocoding control behavior for your needs, see these examples:

-   [Limit results by country](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-country/)
-   [Limit results by a bounding box](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-bbox/)
-   [Draw a custom search area](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/)
-   [Prioritize nearby results](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-proximity/)
-   [Search specific place types](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-types/)
-   [Set search language](https://docs.maptiler.com/sdk-js/examples/geocoding-language/)

The search control has many more powerful config options, including autocomplete and typing predictions or highlighting search results on the map. Check out the [geocoding control API reference](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/classes/MaptilerGeocoderElement/) to see all options.

## Advanced topics

The geocoding control can be used as an **ES Module** (ESM) or **UMD** (Universal Module Definition).

### UMD global variables

When importing scripts from CDN using `<script>` tags, the library creates global variables according to this table:

| Script filename | UMD global variable name | Exports |
| --- | --- | --- |
| `maptilersdk.umd.js` | `maptilerGeocoder` | `class GeocodingControl` |
| `leaflet.umd.js` | `maptilerGeocoder` | `class GeocodingControl` |
| `maplibregl.umd.js` | `maptilerGeocoder` | `class GeocodingControl` |
| `openlayers.umd.js` | `maptilerGeocoder` | `class GeocodingControl` |
| `index.umd.js` | `maptilerGeocoder` | `class GeocodingControl` |

The variable is an object with properties representing library-exported variables, for example `maptilerGeocoder.GeocodingControl`.

Alternatively you can use different CDN, for example `https://www.unpkg.com/@maptiler/geocoding-control@${version}/${Script filename}`. Replace `${version}` with the desired library version and `${Script filename}` with the script filename from the table above.

### POI icons and bundlers

POI icons are served from CDN by default. If you need to serve them from a different location when using a web application bundler (Webpack, Vite), you’ll need additional configuration.

Icons are bundled in the library at `node_modules/@maptiler/geocoding-control/icons`. You can either:

1.  Configure your bundler to handle the icons directory
2.  Use the `iconsBaseUrl` configuration option to specify the icon location
3.  Copy the icons to your `public` directory

* * *

## Related examples

 [![MapLibre GL JS geocoding control how to search places using React JS](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control - React

Tutorial

Search places using Geocoding control in React JS maps.](https://docs.maptiler.com/react/maplibre-gl-js/geocoding-control/)

 [![MapLibre GL JS geocoding control how to search places using Svelte](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control - Svelte

Tutorial

Search places using Svelte and MapLibre geocoding control.](https://docs.maptiler.com/svelte/maplibre-gl-js/geocoding-control/)

 [![MapTiler SDK JS geocoding component how to search places using React JS](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding component - React

Tutorial

Search places using Geocoding control component in React JS.](https://docs.maptiler.com/react/sdk-js/geocoding-component/)

 [![MapTiler SDK JS geocoding control how to search places using Svelte](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control - Svelte

Tutorial

Search places in Svelte using MapTiler geocoding control.](https://docs.maptiler.com/svelte/sdk-js/geocoding-control/)

 [![How to search places using OpenLayers geocoding control](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control

Tutorial

Search for places using OpenLayers geocoding control.](https://docs.maptiler.com/openlayers/examples/geocoding-control/)

 [![How to search places using Leaflet geocoding control](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control

Tutorial

Search places with MapTiler geocoding control in Leaflet JS.](https://docs.maptiler.com/leaflet/examples/geocoding-control/)

 [![Map in React js with geocoding control](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control - React

Tutorial

Add geocoding control to React JS maps using MapTiler.](https://docs.maptiler.com/react/sdk-js/geocoding-control/)

 [![Geocoding: Show place search results](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding API

Tutorial

Search for places using the MapTiler Geocoding API.](https://docs.maptiler.com/sdk-js/examples/geocoding/)

 [![How to search places by coordinates (reverse geocoding)](https://docs.maptiler.com/assets/img/example-card.png)

### Reverse geocoding

Tutorial

Search places by coordinates using reverse geocoding.](https://docs.maptiler.com/sdk-js/examples/reverse-geocoding/)

 [![Geocoding: Add place search to map](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control

Tutorial

Search for places using the map geocoding control component.](https://docs.maptiler.com/sdk-js/examples/geocoder-component/)

 [![Customize API request from geocoding control](https://docs.maptiler.com/assets/img/example-card.png)

### Customize API request (geocoding control)

Example

Modify geocoding URLs before fetching using the adjustUrl option.](https://docs.maptiler.com/sdk-js/examples/geocoding-adjusturl/)

 [![Geocoding limit results by a drawn area](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding limit results by a drawn area

Example

Limit geocoding search results to a drawn polygon bounding box.](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/)

 [![Geocoding limit results by area (bounding box)](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding limit results by area

Example

Limit geocoding search results to a specific bounding box area.](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-bbox/)

 [![Geocoding search for POIs near the user's location](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding search for POIs near the user's location

Example

Filter geocoding search results by specific place types.](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-types/)

 [![Geocoding search results closer to specific point](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding search results by proximity to a specific point

Example

Rank geocoding search results higher based on proximity.](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-proximity/)

 [![Geocoding search results to specified country(ies)](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding search results to specified country(ies)

Example

Limit geocoding control search results to specific countries.](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-country/)

 [![How to specify the geocoding control language(s) response text and prioritization](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding language

Example

Specify languages for geocoding response text and query weighting.](https://docs.maptiler.com/sdk-js/examples/geocoding-language/)

 [![Reverse geocoding uses the user’s location to search for places](https://docs.maptiler.com/assets/img/example-card.png)

### Reverse geocoding uses the user’s location

Example

Search for places by transforming coordinates into place names.](https://docs.maptiler.com/sdk-js/examples/geocoding-reverse-json/)

 [![Search features by coordinates using the geocoding control](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding control (reverse geocoding)

Example

Perform coordinate-based searches using the reverse geocoding control.](https://docs.maptiler.com/sdk-js/examples/geocoding-reverse/)

 [![Geocoding with MapLibre GL JS](https://docs.maptiler.com/assets/img/example-card.png)

### Geocoding with MapLibre

Example

Add a geocoding control to search places in MapLibre maps.](https://docs.maptiler.com/maplibre/examples/geocoding-control/)

 [![Geocoding control standalone vanilla JS](https://docs.maptiler.com/assets/img/example-card.png)

### Standalone vanilla JS component

Example

Search for places using standalone vanilla JS geocoding control.](https://docs.maptiler.com/sdk-js/examples/geocoding-vanilla-js/)