mui-location-autocomplete

A helper component for displaying a @mui/material Autocomplete component with search for maps.

Dependencies

• react
• react-dom
• @mui/material

Installation

npm install --save mui-location-autocomplete
# or
yarn add mui-location-autocomplete
# or
pnpm add mui-location-autocomplete
# or
bun add mui-location-autocompletemui-location-autocomplete

Usage

To start using the LocationAutocomplete component, you will need a provider.

Providers

Currently two providers are supported:

• Google Maps
• MapBox

Both these providers build on the DefaultProvider. This provider also provides the default skeleton for building additional providers.

Google Maps

In order to use the Google Maps provider you need an api key. You can get the API key by following this guide.

const provider = new GoogleMapsProvider('GOOGLE_MAPS_API_KEY')

MapBox

In order to use MapBox, you need a public token. You can get this API key from the Access tokens section on the accounts page.

const provider = new MapBoxProvider('MAP_BOX_PUBLIC_TOKEN')

const [value, setValue] = useState<Location | null>(null)

<LocationAutocomplete
  value={value}
  onValueChange={setValue}
  provider={provider}
  />

Example

Consult the example in the example folder.

Customizability

Some options are available when creating the provider. These options are as follows:

const options: Options = {
  country?: string // A country code following the ISO-3166-1 standard.
  types?: PlaceType[] // A list containing specifications of what types if preffered from the provider.
  limit: 5 // Used to control the number of suggestions, the default is 5. This might impact billing.
  language?: string // The language to return results in.
}

Country codes can be found on the following wiki.