Woosmap MultiSearch JavaScript API

Basics and first steps to set the MultiSearch JS Lib

  1. Hello, World
  2. Installation
  3. The multisearch Object

Hello, World

The easiest way to start learning about the Woosmap MultiSearch JavaScript Library is to see an example. The following example displays an input autocomplete searchbox and after the user select a suggestion from the pick list, get the details for this item and display corresponding json data. The library is here configured to query


The Woosmap MultiSearch JS Library is loaded using a script tag, which can be added inline in your HTML file or dynamically using a separate JavaScript file. For this example, add an input block element and include multisearch.js in your page via the usual tags:

Loading Multisearch JS Library
        <script async
<input id="my-input-multisearch"
       placeholder="Search for..."


The multisearch Object

The JavaScript class that represents the wrapper to autocomplete services is the multisearch class. When instantiating the woosmap.multisearch({...}) you need at least to specify your desired autocomplete services’ API keys and the order in which these services will be called:

Multisearch Autocomplete Services Config
        const multisearch = window.woosmap.multisearch({
    apiOrder: ["localities", "places"],
    localities: {key: "woos-03ae8b61-46a4-3a8c-aa26-7c970087d5ba"},
    places: {key: "AIzaSyAgaUwsVVXJ6KMxlxILqyHi_-udaQke7M4"},


The multisearch have two main methods: one to retrieve suggestions as the user types in the search input, and the other to get details when the user select an item from the pick list.

Retrieve suggestions

You can retrieve suggestions from the user input by calling the autocompleteMulti() method:

Retrieve Multisearch suggestions
    (results) => renderPredictions(results),
    (error) => console.error(error)


A standardized JSON response is returned with all that’s needed to highlight what’s matching with your users’ searches.

Get Details

Finally, to get the suggestion details when a user select one from the pick list, call the detailsMulti() method:

Details of a suggestion
        multisearch.detailsMulti({id: suggestion.id, api: suggestion.api})
    .then((details) => {


This method is needed to retrieve accurate location for every suggestion and get structured address components whatever the type of location your users looked for.

Was this article helpful?
Have more questions? Submit a request