> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)

# Add Search Box to a Web Map

This example adds a [MapboxSearchBox](https://docs.mapbox.com/mapbox-search-js/ja/api/web/search/) control to a [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) web map, enabling users to search the map for a place. After the user chooses a suggestion, a Marker is added to the map and the camera moves to the selected location.

Setting the search box `options` allows for control of the search results. `types` is used to limit the results to addresses and points of interest. `proximity` is used to list results by proximity to the center of the map. Explore all [MapboxSearchBox options](https://docs.mapbox.com/mapbox-search-js/ja/api/core/search/#searchboxoptions).

**JavaScript**

```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Add Search Box to a Web Map</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.6.0/web.js"></script>
</head>
<body>
<!-- Load Mapbox GL JS -->
<link href="https://api.mapbox.com/mapbox-gl-js/v3.17.0/mapbox-gl.css" rel="stylesheet">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.17.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';

    const map = new mapboxgl.Map({
        accessToken: ACCESS_TOKEN,
        container: 'map',
        center: [-73.99209, 40.68933],
        zoom: 8.8
    });

    window.addEventListener('load', () => {
        const searchBox = new MapboxSearchBox();
        searchBox.accessToken = ACCESS_TOKEN;
        searchBox.options = {
            types: 'address,poi',
            proximity: [-73.99209, 40.68933]
        };
        searchBox.marker = true;
        searchBox.mapboxgl = mapboxgl;
        searchBox.componentOptions = { allowReverse: true, flipCoordinates: true };
        map.addControl(searchBox);
    });
</script>

</body>
</html>
```