---
title: "Geocoding: Add place search to map | Geocoding | JavaScript maps SDK"
description: "Search for places using the map geocoding control component."
---
> 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: Add place search to map
This tutorial shows how to use the [geocoding control](https://docs.maptiler.com/sdk-js/modules/geocoding/) module to add a **place search box** to your map or another application.
## NPM module setup
1. Install the npm package.
```bash
npm install --save @maptiler/sdk
```
2. Include the CSS file.
If you have a bundler that can handle CSS, you can `import` the CSS
```js
import "@maptiler/sdk/dist/maptiler-sdk.css";
```
or include it with a `` in the head of the document via the CDN
```html
```
3. Include the following code in your JavaScript file (Example: app.js).
```js
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [16.62662018, 49.2125578], // starting position [lng, lat]
zoom: 14, // starting zoom
});
```
4. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
5. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
6. Install the Geocoding control using npm.
```bash
npm install --save @maptiler/geocoding-control
```
7. Import the Geocoding control component and CSS in your mapping application.
```js
import * as maptilersdk from '@maptiler/sdk';
import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
import "@maptiler/sdk/dist/maptiler-sdk.css";
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [16.62662018, 49.2125578], // starting position [lng, lat]
zoom: 14, // starting zoom
});
```
8. Add the geocoder control to the map.
```js
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [16.62662018, 49.2125578], // starting position [lng, lat]
zoom: 14, // starting zoom
});
const gc = new GeocodingControl();
map.addControl(gc, 'top-left');
```
## Basic JavaScript setup
1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file.
```html
MapTiler Geocoder component
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
3. The next is up to you. You can center your map wherever you desire (modifying the `starting position`) and set an appropriate zoom level (modifying the `starting zoom`) to match your users’ needs. Additionally, you can change the map’s look (by updating the `source URL`); choose from a range of visually appealing map styles from our extensive [MapTiler standard maps](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application.
4. Include the geocoder component JavaScript and CSS files in the `` of your HTML file.
```html
```
5. Add the geocoder control to the map.
```js
const gc = new maptilerGeocoder.GeocodingControl();
map.addControl(gc, 'top-left');
```
### Complete source code
```html
MapTiler Geocoding control
```
## Related examples
### [Geocoding API](https://docs.maptiler.com/sdk-js/examples/geocoding/)
Tutorials
Search for places using the MapTiler Geocoding API.
### [Reverse geocoding](https://docs.maptiler.com/sdk-js/examples/reverse-geocoding/)
Tutorials
Search places by coordinates using reverse geocoding.
### [Geocoding search results by proximity to a specific point](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-proximity/)
Examples
Rank geocoding search results higher based on proximity.
### [Geocoding search results to specified country(ies)](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-country/)
Examples
Limit geocoding control search results to specific countries.