---
title: "Change a map's language | JavaScript maps SDK"
description: "Use setLanguage function to switch languages dynamically."
---

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

# Change a map’s language

You can utilize the [`setLanguage`](https://docs.maptiler.com/sdk-js/api/map/#map#setLanguage) function to dynamically switch between languages. This function allows you to modify the language setting for the labels that appear on maps. By following these guidelines, users can customize the language of map labels based on their personal preferences.

### NPM module setup

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

#### main.js

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

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
    container: 'map',
    style: MapStyle.BASE, 
    center: [16.05, 48],
    zoom: 2.9
});

document
    .getElementById('buttons')
    .addEventListener('click', function (event) {
        const language = event.target.id;
        map.setLanguage(maptilersdk.Language[language]);
    });
```

#### index.html

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>Change a map's language | NPM example</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <style>
  #buttons {
      width: 90%;
      margin: 0 auto;
  }
  .button {
      display: inline-block;
      position: relative;
      cursor: pointer;
      width: 20%;
      padding: 8px;
      border-radius: 3px;
      margin-top: 10px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #ee8a65;
      font-family: sans-serif;
      font-weight: bold;
  }
  </style>
  <div id="map"></div>
  <ul id="buttons">
  <li id="FRENCH" class="button">French</li>
  <li id="RUSSIAN" class="button">Russian</li>
  <li id="GERMAN" class="button">German</li>
  <li id="SPANISH" class="button">Spanish</li>
  </ul>
  <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
<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>Change a map's language</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" />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }

    #buttons {
      width: 90%;
      margin: 0 auto;
    }

    .button {
      display: inline-block;
      position: relative;
      cursor: pointer;
      width: 20%;
      padding: 8px;
      border-radius: 3px;
      margin-top: 10px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #ee8a65;
      font-family: sans-serif;
      font-weight: bold;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <ul id="buttons">
    <li id="FRENCH" class="button">French</li>
    <li id="RUSSIAN" class="button">Russian</li>
    <li id="GERMAN" class="button">German</li>
    <li id="SPANISH" class="button">Spanish</li>
  </ul>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map',
      style: maptilersdk.MapStyle.BASE,
      center: [16.05, 48],
      zoom: 2.9
    });

    document
      .getElementById('buttons')
      .addEventListener('click', function (event) {
        const language = event.target.id;
        map.setLanguage(maptilersdk.Language[language]);
      });
  </script>
</body>

</html>
```

## Related examples

### [Map language by IP](https://docs.maptiler.com/sdk-js/examples/ip-map-language/)

Tutorials

This tutorial shows how to automatically change the map labels language based on visitor's location usign the MapTiler Geolocation API.

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

Examples

Specify languages for geocoding response text and query weighting.

### [Display and style rich text labels](https://docs.maptiler.com/sdk-js/examples/display-and-style-rich-text-labels/)

Examples

Display multilingual rich text labels using format expressions.

### [Set map language](https://docs.maptiler.com/sdk-js/examples/language-map/)

Tutorials

This tutorial shows how to change the default map labels language.
