Installation
This guide contains generic installation instructions for the three Mapbox Search JS frameworks.
Prerequisites
To use Mapbox Search JS, you need to have a Mapbox access token.
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 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.
Installation
To use Mapbox Search JS in your project, you need to import it using either the Mapbox CDN or relevant NPM packages.
Web
Include the following code in the <head> of your HTML file.
<script id="search-js" defer src="https://api.mapbox.com/search-js/v1.5.1/web.js"></script>
<script>
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
const script = document.getElementById('search-js');
script.onload = function() {
mapboxsearch.autofill({
accessToken
});
};
</script>
React
Search JS React is not available on the Mapbox CDN. If you're using React, you can install the NPM package by selecting "Module bundler" above.
Core
Installing Core is not required to use Web. This is only necessary if you wish to call the framework directly without a user interface.
Include the following code in the <head> of your HTML file.
<script src="https://api.mapbox.com/search-js/v1.5.1/core.js"></script>
<script>
const {
MapboxSearch,
SearchSession
} = mapboxsearchcore;
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const search = new MapboxSearch({
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
})
const session = new SearchSession(search);
</script>
Web
Install the NPM package.
npm install --save @mapbox/search-js-web
Include the following code in your JavaScript file.
import { autofill } from '@mapbox/search-js-web';
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
autofill({
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
})
React
npm install --save @mapbox/search-js-react
Include the following code in your JavaScript file.
import React from 'react';
import { AddressAutofill } from '@mapbox/search-js-react';
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';
export function Component() {
return (
<form>
<AddressAutofill accessToken={accessToken}>
<input type="text" name="address" autocomplete="street-address" />
</AddressAutofill>
</form>
);
}
Core
Installing Core is not required to use Web. Use Core if you wish to call the framework directly without a user interface. Core may be used in either a web browser or in a node.js environment.
To call Search JS Core directly, install the NPM package.
npm install --save @mapbox/search-js-core
Include the following code in your JavaScript file.
import {
SearchBoxCore,
SearchSession
} from '@mapbox/search-js-core';
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const search = new SearchBoxCore({
accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN'
})
const session = new SearchSession(search);
Browser support
Mapbox Search JS is supported in most modern browsers. We officially support:
- Versions of Google Chrome, Mozilla Firefox, and Microsoft Edge (Chromium)
- Safari, Mobile Safari 12.0 or higher
Mapbox Search JS is not compatible with any version of Internet Explorer.
If these constraints do not work for your project, consider using Mapbox GL Geocoder or accessing Mapbox Search APIs directly.
Transpiling
Mapbox Search JS is distributed as an ES6 compatible JavaScript bundle.