Add Search Box for Japan | Mapbox Search JS

This example adds a MapboxSearchBox control to a web map, enabling users to search the map for a place. This example specifies Japanese results by adding the language and country options to the MapboxSearchBox instance. If you would like to directly send search requests and receive results without automatically returning them as part of the search box control, see the Search Box Core reference.

To explore how search SDK parameters affect search results, use the Japan Search Playground.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Search Box for Japan</title>
<!-- Default styling. Feel free to remove! -->
<link href="https://api.mapbox.com/mapbox-assembly/v1.3.0/assembly.min.css" rel="stylesheet">
<script id="search-js" defer="" src="https://api.mapbox.com/search-js/v1.0.0-beta.19/web.js"></script>
</head>
<body>
<!-- Load Mapbox GL JS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>

<div id="map" style="position: absolute; width: 100%; height: 100%"></div>
<script>
// TO MAKE THE EXAMPLE WORK YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const ACCESS_TOKEN = 'YOUR_MAPBOX_ACCESS_TOKEN';

    mapboxgl.accessToken = ACCESS_TOKEN;
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox-search-web/cl5l944i6000k14o4ing22srv',
        center: [139.77, 35.68],
        zoom: 6
    });

    const searchJS = document.getElementById('search-js');
    searchJS.onload = function () {
        const searchBox = new MapboxSearchBox();
        searchBox.accessToken = ACCESS_TOKEN;
        searchBox.options = {
            language: 'ja',
            country: 'JP'
        };
        searchBox.marker = true;
        searchBox.mapboxgl = mapboxgl;
        map.addControl(searchBox);
    };
</script>

</body>
</html>

Was this example helpful?