Woosmap Multisearch JS Library helps you integrate a location search box as effectively as possible and cost-effective. With this tiny JavaScript library you can easily combine the following autocomplete services:
Autocomplete services are requested in your desired ordered. By comparing the user input to the returned results and computing a string matching score between these two values, the library can automatically switch to the next autocomplete service and thereby provide suggestions that better suits the needs.
Let’s see two common use cases in which the Multisearch Lib is helpful.
Your users want to search for available products and services online, and find the best and most convenient location, make an appointment, or pick up an order. They want to get to your location as fast as possible. And you want to give them efficient online experiences that drive more visits to your physical locations, reduce calls to your customer support and increase user satisfaction.
The Multisearch can be implemented to find your point of interest by searching a city, a postal code or directly into your store’s names. We recommend the following api call order to address such case:
const multisearch = window.woosmap.multisearch({
apiOrder: ["stores", "localities", "address"],
/*...*/
});
Does your application include an address form, such as the shipping address for an online order, a credit card billing address, or a ridesharing booking form? Woosmap MultiSearch Library can help users supply the details.
For this example, as the form focus on searching addresses, put the api order like this:
const multisearch = window.woosmap.multisearch({
apiOrder: ["localities", "address", "places"],
/*...*/
});
The Autofill Address Form sample below demonstrates how to use the item.address_components
returned from a woosmap.multisearch.detailsMulti()
call to populate the address form.
When the user selects an address from the pick list, get the details of selected address and process it to fulfill the corresponding inputs of your form.
Woosmap Multisearch JS Library can be used in many areas like Retail, Catering, Home Delivery, Ride Sharing, Hospitality and Financial Services.
McDonald’s France was one of our first customers to integrate this library for their recruitment platform. Feel free to test the Multisearch autocomplete feature live: McDonald's Recruitment Platform FR
The library implements a fallback system enabling to switch from one API to another. When the suggestion score is lower than the fallbackBreakpoint
value set, the library will stop calling the corresponding API and switch to the next one (depending on the API order).
This system is flexible and can be manually adjusted for each API in order to be efficient for each of your specific use cases.
A default value is defined for each API:
API | parameter name | fallbackBreakpoint |
---|---|---|
Woosmap Search API (stores) | store |
1 |
Woosmap Localities API | localities |
0.4 |
Woosmap Address API | address |
0.5 |
Google Places API | places |
1 |
If your users focus on finding an asset (searching a store name, a city or a postal code), consider using the following configuration:
const multisearch = window.woosmap.multisearch({
apiOrder: ["stores", "localities", "address"],
store: {
key: "woos-xxx",
fallbackBreakpoint: false
},
localities: {
key: "woos-xxx",
fallbackBreakpoint: 0.3
},
address: {
key: "woos-xxx",
fallbackBreakpoint: 1
}
});
If your users are primarily **seeking for an address**, consider using the following configuration:
const multisearch = window.woosmap.multisearch({
apiOrder: ["localities", "address", "places"],
localities: {
key: "woos-xxx",
fallbackBreakpoint: 0.4,
params: {
types: ["address"]
}
},
address: {
key: "woos-xxx",
fallbackBreakpoint: 0.5
},
places: {
key: "AIzaXxx",
params: {
types: ["address"]
}
}
});
To go further, don't hesitate to read the documentation and continue the discussion on our forum if you want some recommendations for your specific use cases.
If you want to go further
Let's start by putting in place the Woosmap Map API! In the video below, you will learn how to implemen [...]
With the help of use cases using Localities API and Data Management API, Gaël Simon (DevRel Lead at Woo [...]
Distance API will give you the walking, driving, and cycling distance and path to access the destinatio [...]
Remember the time when consumers’ checkout experience was an afterthought because retailers had to focu [...]
The coronavirus crisis is a world-changing event and among all industries, the retail sector was impact [...]
The Google Places API returns information and predictions about places, such as businesses, addresses a [...]
Geolocation for retail business means more than just maps and directions. Today, geolocalisation is a p [...]
Remember the time when consumers’ checkout experience was an afterthought because retailers had to focu [...]
The Woosmap Geofencing SDK is a mobile cross-platform software devel [...]
and don't miss a single one of our news