Skip to main content

Localize the geocoder to a given language

Additional Developer Resources

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 street like Hauptstraße 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.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.9.1/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.3/mapbox-gl-geocoder.min.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v5.0.3/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>
This code snippet will not work as expected until you replace YOUR_MAPBOX_ACCESS_TOKEN with an access token from your Mapbox account.
Additional Developer Resources
Was this example helpful?