---
title: "MapLibre GL JS geocoding control how to search places using React JS | React | Maplibre gl js | Geocoding"
description: "Search places using Geocoding control in React JS maps."
---

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

# MapLibre GL JS geocoding control 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 [How to display MapLibre GL JS map using React JS](../how-to-use-maplibre-gl-js/) 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 maplibregl from 'maplibre-gl';
     import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
     import 'maplibre-gl/dist/maplibre-gl.css'; 
     import './map.css';
    ```
    
4.  Create the `GeocodingControl` ref
    
    ```jsx
    const [API_KEY] = useState('YOUR_MAPTILER_API_KEY_HERE');
     const control = useRef<GeocodingControl>(null);
    ```
    
5.  Add the `GeocodingControl` to the map. Use the current MapLibre map.
    
    ```jsx
    useEffect(() => {
         if (map.current) return; // stops map from intializing more than once
            
         map.current = new maplibregl.Map({
           container: mapContainer.current,
           style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${API_KEY}`,
           center: [lng, lat],
           zoom: zoom
         });
        
         map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
         control.current = new GeocodingControl({apiKey: API_KEY});
         map.current.addControl(control.current);
          
       }, [API_KEY, lng, lat, zoom]);
    ```
    

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

```jsx
import React, { useRef, useEffect, useState } from 'react';
import maplibregl from 'maplibre-gl';
import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
import 'maplibre-gl/dist/maplibre-gl.css';
import './map.css';

export default function Map() {
  const mapContainer = useRef(null);
  const map = useRef(null);
  const lng = 139.753;
  const lat = 35.6844;
  const zoom = 14;
  const API_KEY = 'YOUR_MAPTILER_API_KEY_HERE';
  const control = useRef<GeocodingControl>(null);

  useEffect(() => {
    if (map.current) return; // stops map from intializing more than once
    
    map.current = new maplibregl.Map({
      container: mapContainer.current,
      style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${API_KEY}`,
      center: [lng, lat],
      zoom: zoom
    });

    map.current.addControl(new maplibregl.NavigationControl(), 'top-right');
    control.current = new GeocodingControl({apiKey: API_KEY});
    map.current.addControl(control.current);
  
  }, [API_KEY, lng, 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.