---
title: "MapTiler SDK JS geocoding control how to search places using Svelte | Svelte | Geocoding | JavaScript maps SDK"
description: "Search places in Svelte using MapTiler 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.

# MapTiler SDK 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 MapTile SDK JS](https://docs.maptiler.com/svelte/) 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/maptilersdk";
     import * as maptilersdk from '@maptiler/sdk';
     import {Map, MapStyle, config} from '@maptiler/sdk';
     import "@maptiler/sdk/dist/maptiler-sdk.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';
        
       config.apiKey = apiKey;
    ```
    
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: MapStyle.STREETS,
         center: [initialState.lng, initialState.lat],
         zoom: initialState.zoom
       });
        
       geocoderControl = new GeocodingControl();
       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/maptilersdk";
  import * as maptilersdk from '@maptiler/sdk';
  import {Map, MapStyle, config} from '@maptiler/sdk';
  import "@maptiler/sdk/dist/maptiler-sdk.css";

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

  config.apiKey = apiKey;

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

    map = new Map({
      container: mapContainer,
      style: MapStyle.STREETS,
      center: [initialState.lng, initialState.lat],
      zoom: initialState.zoom
    });

    geocoderControl = new GeocodingControl();
    geocoderControl.on("select", (data) => {
      console.log("select", data);
    });
    map.addControl(geocoderControl);
  });

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

<div class="map-wrap">
  <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%;
  }
</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.