> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-search-js/ja/llms.txt)
# Web Quickstart
# Geocoding - Web Quickstart
**Mapbox Geocoding** provides a convenient way to leverage the Mapbox [Geocoding API](https://docs.mapbox.com/api/search/geocoding-v6/) in a web or Node environment. Create interactive, powerful search sessions enabling users to search for address and places.
Easy-to-use UI components can be dropped into websites as standalone elements or as part of a comprehensive map experience.
This Quickstart Guide will help you get started with Geocoding using [Mapbox Search JS Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-web).
To use Geocoding in a React app, see the [Geocoding React Quickstart](https://docs.mapbox.com/mapbox-search-js/ja/guides/geocoding/react/).
## Prerequisites
To use Mapbox Search JS, you need to have a Mapbox [access token](https://docs.mapbox.com/help/how-mapbox-works/access-tokens/).
### Your default public token
You can use your *default public token* to get started with the code snippets in this guide.
To get your default public token, login to [account.mapbox.com](https://account.mapbox.com) and scroll down to the **Access Tokens** section.
This access token associates your search requests with a Mapbox account for billing. For more information on creating and using access tokens, see our [token management documentation](https://docs.mapbox.com/accounts/guides/tokens/).
## Installation
There are two ways to include Mapbox Search JS depending on your web project's architecture. You can use the Mapbox CDN to quickly add Mapbox Search JS to any web page with a `
```
This script will give you access to Mapbox Search JS Web classes ([`MapboxAddressAutofill`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/autofill/#mapboxaddressautofill),[`MapboxSearchBox`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/search/#mapboxsearchbox) [`MapboxGeocoder`](https://docs.mapbox.com/mapbox-search-js/ja/api/web/geocoding/#mapboxgeocoder), etc ) as well as the `mapboxsearch` global object.
### Installation when using a Module Bundler
Install the NPM package.
```bash
npm install --save @mapbox/search-js-web
```
There is no `default` export for `@mapbox/search-js-web`, you must use named exports.
```js
import { MapboxAddressAutofill, MapboxSearchBox, MapboxGeocoder, config } from '@mapbox/search-js-web'
```
## Using MapboxGeocoder
`MapboxGeocoder` is a JavaScript class. Instantiating it produces a DOM element you can append anywhere in your document, or pass to a Mapbox GL JS map via `map.addControl()`.
To use `MapboxGeocoder` instantiate the class, add your access token (required), configure it with the [available parameters](https://docs.mapbox.com/mapbox-search-js/ja/api/web/geocoding/) (optional) and append it to the DOM.
**Module Bundler**
```javascript
import { MapboxGeocoder } from '@mapbox/search-js-web'
// instantiate a new MapboxGeocoder
const geocoderElement = new MapboxGeocoder()
geocoderElement.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'
// set options for language, country, and proximity
geocoderElement.options = {
language: 'es',
country: 'MX',
proximity: [-99.1332, 19.4326]
}
// append to the DOM - (adjust as necessary for your document)
document.querySelector('div').appendChild(geocoderElement);
```
**CDN**
```html
```
## Integration with a Mapbox GL JS Map
`MapboxGeocoder` can be used in a standalone fashion, but a common use case is to zoom to a location on a map and show a marker pin after the user chooses a result. `MapboxGeocoder` includes convenient configuration options for binding with a Mapbox GL JS Map instance to achieve this functionality.
**Module Bundler**
```javascript
import mapboxgl from 'mapbox-gl'
import { MapboxGeocoder } from '@mapbox/search-js-web'
import 'mapbox-gl/dist/mapbox-gl.css'
const mapboxAccessToken = 'YOUR_MAPBOX_ACCESS_TOKEN'
// instantiate a map
const map = new mapboxgl.Map({
accessToken: mapboxAccessToken,
container: 'map',
center: [-74.5, 40],
zoom: 9
})
// instantiate a new geocoder instance
const geocoder = new MapboxGeocoder()
// set the mapbox access token and geocoding API options
geocoder.accessToken = mapboxAccessToken
geocoder.options = {
language: 'es',
proximity: [-74.5, 40]
}
// set the mapboxgl library to use for markers and enable the marker functionality
geocoder.mapboxgl = mapboxgl
geocoder.marker = true
// add the geocoder instance to the Map Control interface
map.addControl(geocoder)
```
**CDN**
```html
```
> **Related content (example): [Add Geocoder to a Web Map](https://docs.mapbox.com/mapbox-search-js/ja/example/add-geocoder-to-map/)**
>
> Try out a working example showing the `MapboxGeocoder` bound to a Mapbox GL JS map.
## Working with events
While `MapboxGeocoder` works seamlessly when implemented with a Mapbox GL JS map, there are many cases when you will want to add in additional functionality to the geocoder or trigger other code on `MapboxGeocoder` interactions. `MapboxGeocoder` provides many [events](https://docs.mapbox.com/mapbox-search-js/ja/api/web/geocoding/#mapboxgeocoder-events) which allow you to listen to and extend functionality. See the [API Reference](https://docs.mapbox.com/mapbox-search-js/ja/api/web/geocoding/#mapboxgeocoder-events) for a full list.
Below is an example of a `retrieve` event which logs the selected suggestion.
```js
const geocoder = new MapboxGeocoder();
...
// add an event listener to handle the `retrieve` event
geocoder.addEventListener('retrieve', (e) => {
const feature = e.detail;
console.log(feature) // geojson object representing the selected item
});
```
## Additional Resources
Quickstart Guides are also available for the other main features of Mapbox Search JS:
- Address Autofill - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/autofill/react/)
- Search Box - [Web](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/web/) \| [React](https://docs.mapbox.com/mapbox-search-js/ja/guides/search/react/)
Geocoding can also be implemented with a custom UI by using the [Mapbox Search JS Core Framework](https://docs.mapbox.com/mapbox-search-js/ja/guides/#search-js-core).