Configure the Woosmap MultiSearch JavasScript API
Explore available parameters and understand how to combine the different autocomplete services with the JS Lib
- How to set API configuration up
- How to set the autocomplete configuration
- Get location details from suggestion id
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 to get an API Key if necessary.
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:
Set the optional params field
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 provides suggestions for addresses worldwide by setting types to types=address.
Fallback Configuration Example
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.
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 thedetailsMulti()name: Location’s nameformatted_address: Complete address of the locationtypes: List of location’s typesgeometry: Data about the geographic coordinateaddress_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
{
"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"
]
}
}
