Skip to main content

Add Search Box for Japan

Additional Developer Resources

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.24/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 MAP APPEAR 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
    });

    window.addEventListener('load', () => {
        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>
Additional Developer Resources
Was this example helpful?