How to specify the geocoding control language(s) response text and prioritization

Indicate the language(s) utilized for the response text and the prioritization of query results in geocoding control. Include the language options within the control constructor. For a complete list of geocoding control options, please refer to the Geocoding control’s reference documentation. In the given example, we initialize the control to incorporate French and English languages.


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

main.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: [-72.745, 46.081], // starting position [lng, lat]
  zoom: 6, // starting zoom
});
//set geocoding control language. Example Canada, Quebec province that is primarily Francophone
const gc = new GeocodingControl({
  language: ['fr', 'en']
});
map.addControl(gc, 'top-right');
document.getElementById('buttons').addEventListener('click', function (event) {
  // Retrieve language based on button id
  gc.setOptions({ 
    language: event.target.id,
    placeholder: setPlaceHolder(event.target.id)
  });
});
function setPlaceHolder(language) {
  switch (language) {
    case 'en':
      return 'Search';
      break;
    case 'fr':
      return 'Recherche';
      break;
    case 'de':
      return 'Suchen';
      break;
    case 'ja':
      return '検索';
      break;
    case 'es':
      return 'Buscar';
      break;  
    default:
      return 'Search';
      break;
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="robots" content="noindex">
  <title>MapTiler Geocoding control language</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <div id="map"></div>
  <ul id="buttons">
    <li id="en" class="button">English</li>
    <li id="fr" class="button">French</li> 
    <li id="de" class="button">German</li>
    <li id="ja" class="button">Japanese</li>
    <li id="es" class="button">Spanish</li>
  </ul>
  <script type="module" src="./main.js"></script>
</body>
</html>

style.css

body {
  margin: 0;
  padding: 0;
}
#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
#buttons {
  width: auto;
  margin: 0 1em;
  padding:0;
  position:absolute;
  top:0;
  left:0;
  z-index:99;
}
.button {
  display: block;
  position: relative;
  cursor: pointer;
  width: auto;
  padding: 8px;
  border-radius: 3px;
  margin: 10px 0 0 0;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #3174ff;
  font-family: sans-serif;
  font-weight: bold;
}

<!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 control language</title>
  <script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
  <link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
  <script
    src="https://cdn.maptiler.com/maptiler-geocoding-control/v3.0.0/maptilersdk.umd.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

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

    #buttons {
      width: auto;
      margin: 0 1em;
      padding: 0;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 99;
    }

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

<body>
  <div id="map"></div>
  <ul id="buttons">
    <li id="en" class="button">English</li>
    <li id="fr" class="button">French</li>
    <li id="de" class="button">German</li>
    <li id="ja" class="button">Japanese</li>
    <li id="es" class="button">Spanish</li>
  </ul>
  <script>
    maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new maptilersdk.Map({
      container: 'map', // container id
      style: maptilersdk.MapStyle.STREETS,
      center: [-72.745, 46.081], // starting position [lng, lat]
      zoom: 6, // starting zoom
    });
    //set geocoding control language. Example Canada, Quebec province that is primarily Francophone
    const gc = new maptilerGeocoder.GeocodingControl({
      language: ['fr', 'en']
    });
    map.addControl(gc, 'top-right');
    document.getElementById('buttons').addEventListener('click', function (event) {
      // Retrieve language based on button id
      gc.setOptions({
        language: event.target.id,
        placeholder: setPlaceHolder(event.target.id)
      });
    });
    function setPlaceHolder(language) {
      switch (language) {
        case 'en':
          return 'Search';
          break;
        case 'fr':
          return 'Recherche';
          break;
        case 'de':
          return 'Suchen';
          break;
        case 'ja':
          return '検索';
          break;
        case 'es':
          return 'Buscar';
          break;
        default:
          return 'Search';
          break;
      }
    }
  </script>
</body>

</html>

Learn more

Check the MapTiler Geocoding control 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. 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) or Svelte (Geocoding Svelte component) applications. Additionally, you have the option to use the VanillaJS version 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), OpenLayers (OpenLayers Geocoding control), or MapLibre GL JS (MapLibre GL JS Geocoding control).