---
title: "Map in React js with geocoding control | React | Geocoding | JavaScript maps SDK"
description: "Add geocoding control to React JS maps using MapTiler."
---

> 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.

# Map in React js with geocoding control

## Maps in React series

In this series, we will learn how to create a map app in React with popups, a visualization switcher, geocoding control, 3D terrain, and a sidebar.

-   Episode 0: [Map in React JS with Material UI](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)
-   Episode 1: [Map in React JS point data from geojson data](https://docs.maptiler.com/react/sdk-js/geojson-points/)
-   Episode 2: [Map in React JS create a heatmap](https://docs.maptiler.com/react/sdk-js/heatmap/)
-   Episode 3: [Map in React js with popup and sidebar](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)
-   **Episode 4: Map in React js with geocoding control**
-   Episode 5: [3D Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/3d-map/)

This example is the **Episode 4** of the Maps in React series. In this step-by-step tutorial, you’ll learn how to create a map with a geocoding control in your React JS map using the MapTiler SDK JS. The [geocoding control](https://docs.maptiler.com/sdk-js/modules/geocoding/) facilitates the use of the [MapTiler Geocoding API](https://www.maptiler.com/cloud/geocoding/) to search places (States, Cities, Streets, Addresses, POIs, …).

In this example, I’ll focus on adding the geocoding control to our React + MUI map.

![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg)[MapTiler Geocoding control on GitHub](https://github.com/maptiler/maptiler-geocoding-control)

By the end of this tutorial, you will be able to create a map with a geocoding control. With your newfound knowledge, you will be able to create visually stunning maps with React + Geocoding Control + MapTiler SDK. Take a look at the final output of this tutorial below:

1.  This tutorial builds on [Map in React js with popup and sidebar](https://docs.maptiler.com/react/sdk-js/popup-sidebar/) code. (That tutorial shows how to create a map with a sidebar and popup).
    
2.  Install MapTiler Geocoding control library, navigate to your project folder and run the command:
    
    ```bash
    npm i @maptiler/geocoding-control
    ```
    
3.  Import the `geocodingControl` and its styles into the `src/components/Map/map.jsx` component. In this example we will not be using the geocodingControl React component. In the example [MapTiler SDK JS geocoding component how to search places using React JS](https://docs.maptiler.com/react/sdk-js/geocoding-component/) you can see how to use the component on a map. You can also use the geocodingControl component if you need the geocoding control without a map.
    

```jsx
import * as maptilersdk from "@maptiler/sdk";
 import "@maptiler/sdk/dist/maptiler-sdk.css";
 import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
```

1.  Add the `geocodingControl` to the map.

```jsx
const gc = new GeocodingControl();
 map.current.addControl(gc);
```

1.  We already have the geocoding control working on our map.
    
    ![Geocoding control using React JS with Material UI](https://docs.maptiler.com/react/sdk-js/geocoding-control/geocoding-control.webp)
    
2.  Let’s add some options to the `geocodingControl` to improve the results. Limit the number of results to 3.
    

```jsx
const gc = new GeocodingControl({
    limit: 3, // limit result number
 });
 map.current.addControl(gc);
```

1.  Limit the results to a specific country. Since our map is in Honolulu we will limit the results to the United States of America.

```jsx
const gc = new GeocodingControl({
    limit: 3, // limit result number
    country: "us", // limit resoults to united states
 });
 map.current.addControl(gc);
```

1.  Now the results are only from the USA.
    
    ![Geocoding control results only from USA](https://docs.maptiler.com/react/sdk-js/geocoding-control/geocoding-control-usa.webp)
    
2.  That removes the other countries from the results, but we still don’t get the results for Honolulu first. To fix this we can either set a fixed proximity or specify the center of my map. In the example we’re going to use the center of the map.
    

```jsx
const gc = new GeocodingControl({
    limit: 3, // limit result number
    country: "us", // limit resoults to united states
    proximity: [{ type: "map-center" }], // resoults closer to map center will be shown first
 });
 map.current.addControl(gc);
```

1.  We now have the results prioritized by proximity to the center of the map, which shows us the results for Honolulu first. Let’s refine the search a little further by specifying the type of results we want. In this case, we are only interested in addresses.
    
    ```jsx
    const gc = new GeocodingControl({
        limit: 3, // limit result number
        country: "us", // limit resoults to united states
        proximity: [{ type: "map-center" }], // resoults closer to map center will be shown first
        types: ["address"], // limit search types only to adresses
     });
     map.current.addControl(gc);
    ```
    
    ![Geocoding control results by map center using React JS with Material UI](https://docs.maptiler.com/react/sdk-js/geocoding-control/geocoding-control-map-center.webp)
    
2.  Congratulations! You have created a map with a geocoding control to search places. Have a look at the [Geocoding Control API reference](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/) to learn more about the control options and events.
    
    ![Display a geocoding control in a map using React JS with Material UI](https://docs.maptiler.com/react/sdk-js/geocoding-control/final_map.webp)
    

## Full code to download

We have created a repository with the result of this tutorial that will serve as a basis to build future applications. You can access the repository at ![GitHubLogo](https://docs.maptiler.com/assets/img/github.svg)[Maps in React](https://github.com/maptiler/maps-in-react/tree/E4-geocoding).

## Next episode

Continue to [Episode 5: 3D Map in React js with geocoding control](https://docs.maptiler.com/react/sdk-js/3d-map/) to learn how to a 3D terrain map in your React JS map using the MapTiler SDK JS.

## Related examples

### [Learn the basics - React](https://docs.maptiler.com/react/)

Tutorials

Create React JS components for MapTiler SDK JS maps.

### [Geocoding component - React](https://docs.maptiler.com/react/sdk-js/geocoding-component/)

Tutorials

Search places using Geocoding control component in React JS.

### [Map with Material UI](https://docs.maptiler.com/react/sdk-js/get-started-material-ui/)

Tutorials

Create React JS maps with Material UI and MapTiler.

### [Points from geojson - React](https://docs.maptiler.com/react/sdk-js/geojson-points/)

Tutorials

Add GeoJSON points to React JS maps with MapTiler.

### [Heatmap in React JS](https://docs.maptiler.com/react/sdk-js/heatmap/)

Tutorials

Create heatmap visualizations in React JS maps using MapTiler.

### [Popup and sidebar - React](https://docs.maptiler.com/react/sdk-js/popup-sidebar/)

Tutorials

Create popups and sidebars in React JS maps.

### [3D Terrain Map](https://docs.maptiler.com/react/sdk-js/3d-map/)

Tutorials

Create 3D terrain maps with geocoding in React JS.