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, 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.22/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
mapboxgl.accessToken = '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?