---
title: "Geocoding search results to specified country(ies) | Geocoding | JavaScript maps SDK"
description: "Limit geocoding control search results to specific countries."
---

> 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 search results to specified country(ies)

Restricting the search results to a specific country or countries is achievable through Geocoding control. By utilizing the `country` option in the control constructor, one can effectively search for places within the desired country or countries. For a comprehensive list of geocoding control options, refer to the [Geocoding control’s reference documentation](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/types/MaptilerGeocoderOptions/). To illustrate, consider the following example where we perform a search limited to Germany and France as the specified countries.

### NPM module setup

```bash
npm install --save @maptiler/sdk @maptiler/geocoding-control
```

#### main.js

```js
import { Map, MapStyle, config } from '@maptiler/sdk';
import '@maptiler/sdk/dist/maptiler-sdk.css';
import { GeocodingControl } from '@maptiler/geocoding-control/maptilersdk';

config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
const map = new Map({
  container: "map", // container id
  style: MapStyle.STREETS,
  center: [6.273193,48.451066],
  zoom: 4
});
//set geocoding control search filter by Germany and France
const gc = new GeocodingControl({
  country: ["DE", "FR"]
});
map.addControl(gc, "top-left");
```

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>MapTiler Geocoding search results to specified country(ies)</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>
</html>
```

#### style.css

```css
body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
```

### Basic JavaScript setup

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapTiler Geocoding search results to specified country(ies)</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.2.0/maptiler-sdk.css" rel="stylesheet" />
  <script
    src="https://cdn.maptiler.com/maptiler-geocoding-control/v3.1.0/maptilersdk.umd.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    maptilersdk.config.apiKey = "YOUR_MAPTILER_API_KEY_HERE";
    const map = new maptilersdk.Map({
      container: "map", // container id
      style: maptilersdk.MapStyle.STREETS,
      center: [6.273193, 48.451066],
      zoom: 4
    });
    //set geocoding control search filter by Germany and France
    const gc = new maptilerGeocoder.GeocodingControl({
      country: ["DE", "FR"]
    });
    map.addControl(gc, "top-left");
  </script>
</body>

</html>
```

## Learn more

Check the [MapTiler Geocoding control API reference](https://docs.maptiler.com/sdk-js/modules/geocoding/api/api-reference/) for all search options. For example specifying the language of the results, etc.

Do you want to see how the geocoder component is made? Check the [MapTiler Geocoding control repository](https://github.com/maptiler/maptiler-geocoding-control). You can also use it as inspiration to create your component.

Discover the process of integrating the geocoding control feature into your **React** ([Geocoding React component repository](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/react/)) or **Svelte** ([Geocoding Svelte component](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/svelte/)) applications. Additionally, you have the option to use the [VanillaJS version](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/vanilla-js/) to customize it for any of your applications.

Are you currently using a different map library? No worries! Learn how to incorporate the geocoding control functionality with **Leaflet** ([Leaflet Geocoding control](https://docs.maptiler.com/leaflet/examples/geocoding-control)), **OpenLayers** ([OpenLayers Geocoding control](https://docs.maptiler.com/openlayers/examples/geocoding-control/)), or **MapLibre GL JS** ([MapLibre GL JS Geocoding control](https://docs.maptiler.com/sdk-js/modules/geocoding/api/usage/maplibre-gl-js/)).

## Related examples

### [Geocoding API](https://docs.maptiler.com/sdk-js/examples/geocoding/)

Tutorials

Search for places using the MapTiler Geocoding API.

### [Geocoding limit results by a drawn area](https://docs.maptiler.com/sdk-js/examples/geocoding-filter-draw-bbox/)

Examples

Limit geocoding search results to a drawn polygon bounding box.

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