Beta
Mapbox Search JS
All docsMapbox Search JSExamplesAdd Search Box for Japan

Add Search Box for Japan

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, please see the MapboxSearch 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.14/web.js"></script>
</head>
<body>
<!-- Load Mapbox GL JS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/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'
};
map.addControl(searchBox);
};
</script>
</body>
</html>