Localize the geocoder to a given language | Mapbox GL JS

This example localizes the mapbox-gl-geocoder control for the German language by using the language parameter, which sets the geocoder UI elements, controls the language of the text supplied in responses, and also affects result scoring.

The mapbox-gl-geocoder plugin uses the Mapbox Geocoding API to enable place search.

Search for a place like Olympic Stadium to see results localized for German (de-DE).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Localize the geocoder to a given language</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<link href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.0/mapbox-gl-geocoder.css" type="text/css">

<div id="map"></div>

<script>
	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
    const map = new mapboxgl.Map({
        container: 'map',
        // Choose from Mapbox's core styles, or make your own style with Mapbox Studio
        style: 'mapbox://styles/mapbox/streets-v12',
        center: [-79.4512, 43.6568],
        zoom: 13
    });

    const geocoder = new MapboxGeocoder({
        accessToken: mapboxgl.accessToken,
        language: 'de-DE', // Specify the language as German.
        mapboxgl: mapboxgl
    });
    map.addControl(geocoder);
</script>

</body>
</html>

Was this example helpful?