Source: https://developers.woosmap.com/products/multisearch-lib/js/full-configuration/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Configure the Woosmap MultiSearch JavasScript API



## How to set API configuration up

The library requires to set a `key` for each available API in your MultiSearch implementation, whether it's a Woosmap
API or for Google Places API.

Please refer to the [documentation](/api-reference/authentication/) to get an API Key if
necessary.

```js
const multisearch = woosmap.multisearch({
  store: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
  },
  localities: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
  },
  places: {
    key: "{your_google_api_key}",
  },
});
```

### API options

Additionally, for each API configuration you can apply the same optional parameters as defined in the concerned REST
API’s documentation.

Documentation:

- [Search Autocomplete (for stores)](https://developers.woosmap.com/products/stores-api/features/autocomplete/)
- [Localities Autocomplete](https://developers.woosmap.com/products/localities/features/autocomplete/)
- [Places Autocomplete](https://developers.google.com/maps/documentation/places/web-service/autocomplete)

Set the optional `params` field

```js
const multisearch = woosmap.multisearch({
  store: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    params: {
      query: 'type:"bose_store"',
    },
  },
  localities: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    params: {
      components: { country: ["FR", "GB"] },
      language: "en",
      types: ["locality", "country", "postal_code"],
    },
  },
  places: {
    key: "{your_google_api_key}",
    params: {
      components: { country: ["FR", "GB"] },
    },
  },
});
```

Please note that [localities autocomplete endpoint](/products/localities/features/autocomplete) provides suggestions for addresses worldwide by setting types to `types=address`.

### Fallback Configuration Example

```js
const multisearch = woosmap.multisearch({
  store: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    fallbackBreakpoint: false,
    minInputLength: 2,
  },
  localities: {
    key: "woos-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx", // your woosmap project public key
    fallbackBreakpoint: 0.3,
    minInputLength: 2,
  },
  places: {
    key: "{your_google_api_key}",
    fallbackBreakpoint: 1,
    minInputLength: 6,
  },
});
```

## How to set the autocomplete configuration

Once you have configured your APis and the fallback logics, you can start using the `autocompleteMulti()` service. You
now have to define the order in which the APIs will be called by setting the `apiOrder` field. Find a full example in
the [Sample page](/products/multisearch-lib/js/samples/woosmap-multisearch-advanced/).

## Get location details from suggestion id

The MultiSearch Library also provides a `detailsMulti()` service. It returns a JSON/Object response containing all
location data based on a location Id previously retrieved in the Location autocomplete suggestion.

Its response contains all the pieces of information you may need to standardize in order to improve the user experience,
to get accurate location of a location, to split an address in components for further use cases, and so on.

#### detailMulti() response definition

The `detailsMulti()` service response consists of a common part made of 5 fields:

- `id`: Location's id or suggestion's id used to link the suggestion to the `detailsMulti()`
- `name`: Location's name
- `formatted_address`: Complete address of the location
- `types`: List of location's types
- `geometry`: Data about the geographic coordinate
- `address_components`: Location's address divided in several components.

A specific part contains all data returned by the requested API. The field `items` encapsulates this data.

#### Returned Suggestions Example

```json
{
  "formatted_address": "Via del Corso, 186, 00187 Roma RM, Italia",
  "geometry": {
    "location_type": "ROOFTOP",
    "location": {
      "lat": 41.90207,
      "lng": 12.4801
    },
    "viewport": {
      "northeast": {
        "lat": 41.90297,
        "lng": 12.48131
      },
      "southwest": {
        "lat": 41.90117,
        "lng": 12.47889
      }
    }
  },
  "id": "dW5kZWZpbmVk",
  "types": ["house_number"],
  "name": "",
  "address_components": [
    {
      "types": ["country"],
      "long_name": "Italia",
      "short_name": "IT"
    },
    {
      "long_name": "Roma",
      "short_name": "Roma",
      "types": ["locality"]
    },
    {
      "long_name": "Via del Corso",
      "short_name": "Via del Corso",
      "types": ["route"]
    },
    {
      "long_name": "00187",
      "short_name": "00187",
      "types": ["postal_code"]
    },
    {
      "long_name": "186",
      "short_name": "186",
      "types": ["street_number"]
    }
  ],
  "item": {
    "address_components": [
      {
        "types": ["country"],
        "long_name": "Italia",
        "short_name": "IT"
      },
      {
        "types": ["state"],
        "long_name": "Lazio",
        "short_name": "Lazio"
      },
      {
        "types": ["county"],
        "long_name": "Roma",
        "short_name": "RM"
      },
      {
        "long_name": "Roma",
        "short_name": "Roma",
        "types": ["locality"]
      },
      {
        "long_name": "Colonna",
        "short_name": "Colonna",
        "types": ["district"]
      },
      {
        "long_name": "Via del Corso",
        "short_name": "Via del Corso",
        "types": ["route"]
      },
      {
        "long_name": "00187",
        "short_name": "00187",
        "types": ["postal_code"]
      },
      {
        "long_name": "186",
        "short_name": "186",
        "types": ["street_number"]
      }
    ],
    "formatted_address": "Via del Corso, 186, 00187 Roma RM, Italia",
    "geometry": {
      "location_type": "ROOFTOP",
      "location": {
        "lat": 41.90207,
        "lng": 12.4801
      },
      "viewport": {
        "northeast": {
          "lat": 41.90297,
          "lng": 12.48131
        },
        "southwest": {
          "lat": 41.90117,
          "lng": 12.47889
        }
      }
    },
    "types": ["house_number"]
  }
}
```