A helper component for displaying a @mui/material Autocomplete component with search for maps.
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
To start using the LocationAutocomplete
component, you will need a provider.
Currently two providers are supported:
Both these providers build on the DefaultProvider
. This provider also provides the default skeleton for building additional providers.
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')
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}
/>
Consult the example in the example
folder.
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.