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.

JavaScript


<!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>

追加の開発者リソース

このexampleは役に立ちましたか？