---
title: "MapTiler SDK JS geocoding component how to search places using React JS | React | Geocoding | JavaScript maps SDK"
description: "Search places using Geocoding control component in React JS."
---

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

# MapTiler SDK JS geocoding component how to search places using React JS

This tutorial shows how to search for places using the [Geocoding control](https://www.npmjs.com/package/@maptiler/geocoding-control). The geocoder component facilitates the use of the [MapTiler Geocoding API](https://www.maptiler.com/cloud/geocoding/).

![Display Geocoding control using React JS](final_map_geocoding.webp)

1.  Follow the [React JS with MapTiler maps](https://docs.maptiler.com/react/) tutorial to create a simple fullscreen map application. You **do not need** to add the marker to the map.
    
2.  Install the Geocoding control module
    
    ```bash
    npm install --save @maptiler/geocoding-control
    ```
    
3.  Import the Geocoding control and the required React functions. Add these lines on top of `map.jsx` file.
    
    ```jsx
    import React, { useRef, useEffect, useState } from 'react'; 
     import * as maptilersdk from '@maptiler/sdk';
     import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
     import "@maptiler/sdk/dist/maptiler-sdk.css"; 
     import './map.css';
    ```
    
4.  Create the `GeocodingControl` ref
    

```jsx
const control = useRef<GeocodingControl>(null);
```

1.  Add the `GeocodingControl` to the map. Use the current MapTiler SDK map.
    
    ```jsx
    useEffect(() => {
        if (map.current) return; // stops map from intializing more than once
            
        map.current = new maptilersdk.Map({
          container: mapContainer.current,
          style: maptilersdk.MapStyle.STREETS,
          center: [tokyo.lng, tokyo.lat],
          zoom: zoom
        });
        
        control.current = new GeocodingControl();
        map.current.addControl(control.current);
          
      }, [tokyo.lng, tokyo.lat, zoom]);
    ```
    

We are finished, your `map.jsx` file should look like this:

```jsx
import React, { useRef, useEffect, useState } from 'react';
import * as maptilersdk from '@maptiler/sdk';
import { GeocodingControl } from "@maptiler/geocoding-control/maptilersdk";
import "@maptiler/sdk/dist/maptiler-sdk.css";
import './map.css';

export default function Map() {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const control = useRef<GeocodingControl>(null);
  const tokyo = { lng: 139.753, lat: 35.6844 };
  const zoom = 14;
  maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  useEffect(() => {
    if (map.current) return; // stops map from intializing more than once
  
    map.current = new maptilersdk.Map({
      container: mapContainer.current,
      style: maptilersdk.MapStyle.STREETS,
      center: [tokyo.lng, tokyo.lat],
      zoom: zoom
    });

    control.current = new GeocodingControl();
    map.current.addControl(control.current);
  
  }, [tokyo.lng, tokyo.lat, zoom]);

  return (
    <div className="map-wrap">
      <div ref={mapContainer} className="map" />
    </div>
  );
}
```

your `map.ccs` file should look like this:

```css
.map-wrap {
  position: relative;
  width: 100%;
  height: calc(100vh - 77px); /* calculate height of the screen minus the heading */
}

.map {
  position: absolute;
  width: 100%;
  height: 100%;
}
```

Note

The library also has types defined to be used in **TypeScript**.

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

## Learn more

Visit the [MapTiler Geocoding API reference](https://docs.maptiler.com/cloud/api/geocoding/) for all search options. For example specifying the language of the results, etc.

## Related examples

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

Tutorials

Create React JS components for MapTiler SDK JS maps.

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

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

Tutorials

Add geocoding control to React JS maps using MapTiler.

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

Tutorials

Create 3D terrain maps with geocoding in React JS.