--- title: "Geocoding control standalone vanilla JS | Geocoding | JavaScript maps SDK" description: "Search for places using standalone vanilla JS geocoding control." --- * * * # Geocoding control standalone vanilla JS This tutorial demonstrates how to search places usign the standalone [MapTiler Geocoding Control](https://docs.maptiler.com/sdk-js/modules/geocoding/), and shows both the JSON response from the Geocoding API and the selected list item. This example doesn’t use a map. To use the control on a map, you can see code examples of [how to use the Geocoding control with different map libraries and Javascript frameworks](https://docs.maptiler.com/sdk-js/modules/geocoding/examples/). ### NPM module setup ```bash npm install --save @maptiler/geocoding-control ``` #### main.js ```js import '@maptiler/geocoding-control/'; const geocodingControl = document.querySelector("maptiler-geocoder"); //Change the apikey attribute of the web component to load your API key from an environment variable or similar. //const apiKey = "YOUR_MAPTILER_API_KEY_HERE"; //geocodingControl.apiKey = apiKey; geocodingControl.addEventListener("response", (e) => { document.getElementById("results").innerHTML = e.detail ? JSON.stringify(e.detail, null, 2) : ""; }); geocodingControl.addEventListener("pick", (e) => { document.getElementById("results").innerHTML = e.detail ? JSON.stringify(e.detail, null, 2) : ""; }); ``` #### index.html ```html Geocoding how to search places 

  


```

#### style.css

```css
#results {
  position: absolute;
  top: 48px;
  bottom: 0;
  left: 8px;
  right: 8px;
  overflow: auto;
  background: #E4ECFF;
  font-size: 0.85em;
  border-radius: 6px;
  box-shadow: 0px 15px 68px rgba(51, 51, 89, 0.15);
  padding: 8px;
}

#search-container {
  position: absolute;
  right: 48px;
}
```

### Basic JavaScript setup

```html




  
  
  Geocoding how to search places
  
  



  

    
  

  

  



```

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