Skip to main content

Installation

This guide contains generic installation instructions for the three Mapbox Search JS frameworks.

Try a Quickstart Guide

Detailed installation instructions and code snippets are available for the three main features of Mapbox Search JS:

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.0.0-beta.22/web.js"></script>
<script>
// TO USE THIS PACKAGE YOU MUST
// ADD YOUR ACCESS TOKEN FROM
// https://account.mapbox.com
const accessToken = 'undefined';

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.0.0-beta.22/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: 'undefined'
})

const session = new SearchSession(search);
</script>

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.

Was this page helpful?