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

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

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 Svelte](final_map_geocoding.webp)

1.  Follow the [How to display a map in Svelte using MapLibre GL JS](../how-to-use-maplibre-gl-js/) tutorial to create a simple full-screen 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. Add these lines on top of `Map.Svelte` file.
    
    ```js
    import { onMount, onDestroy } from 'svelte';
     import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
     import maplibregl, { Map, NavigationControl } from 'maplibre-gl';
     import 'maplibre-gl/dist/maplibre-gl.css';
    ```
    
4.  Create the geocoderControl variable
    
    ```js
    let mapContainer;
     let geocoderControl;
    ```
    
5.  Create the apiKey variable
    
    ```js
    let geocoderControl;
       const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    ```
    
6.  Add the `GeocodingControl` component to the map. Use the current MapTiler SDK JS map.
    
    ```js
    onMount(() => {
       const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };
        
       map = new Map({
         container: mapContainer,
         style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${apiKey}`,
         center: [initialState.lng, initialState.lat],
         zoom: initialState.zoom
       });
        
       map.addControl(new NavigationControl(), 'top-right');
       geocoderControl = new GeocodingControl({ apiKey: apiKey });
       geocoderControl.on("select", (data) => {
         console.log("select", data);
       });
       map.addControl(geocoderControl);
     });
    ```
    

We are finished, your `Map.Svelte` file should look like this:

```html
<script>
  import { onMount, onDestroy } from 'svelte';
  import { GeocodingControl } from "@maptiler/geocoding-control/maplibregl";
  import maplibregl, { Map, NavigationControl } from 'maplibre-gl';
  import 'maplibre-gl/dist/maplibre-gl.css';

  let map;
  let mapContainer;
  let geocoderControl;
  const apiKey = 'YOUR_MAPTILER_API_KEY_HERE';

  onMount(() => {
    const initialState = { lng: 139.753, lat: 35.6844, zoom: 14 };

    map = new Map({
      container: mapContainer,
      style: `https://api.maptiler.com/maps/streets-v4/style.json?key=${apiKey}`,
      center: [initialState.lng, initialState.lat],
      zoom: initialState.zoom
    });

    map.addControl(new NavigationControl(), 'top-right');
    geocoderControl = new GeocodingControl({ apiKey: apiKey });
    geocoderControl.on("select", (data) => {
      console.log("select", data);
    });
    map.addControl(geocoderControl);
  });

  onDestroy(() => {
    map.remove();
  });
</script>

<div class="map-wrap">
  <a href="https://www.maptiler.com" class="watermark"><img
    src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"/></a>
  <div class="map" bind:this={mapContainer}></div>
</div>

<style>
  .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%;
  }

  .watermark {
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 999;
  }
</style>
```

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.