Fallback on Woosmap Address

Autocomplete Woosmap Localities and fallback on Woosmap Address.
  1. Overview
  2. Woosmap Address Parameters
  3. Add Listener on Selected Woosmap Address Predictions
  4. Sample

Instead of plugging the fallback to Google Places, you are now able to perform autocomplete query on Woosmap Address API, following your desired matching ratio parameters.

Like Google Places, Woosmap Address has two main endpoints. One dedicated to the autocomplete query, which only retrieves matching address without geographic information, and the other to geocode the user selected address.

Overview

Woosmap Address API is both an autocomplete service which provides autocompletion suggestions for a given input, and a geocoding service to get lat/long for a given address.

To activate this feature though this widget, you’ll need to set the parameter search.fallbackWoosmapAddress to true.

<script>
    const config = {
        woosmap: {
            projectKey: "woos-XXXX"
        },
        search: {
            fallbackWoosmapAddress: true
        }
    };    
    const input = document.getElementById("my-input");
    new AutocompleteWoosmapSearchBox(input, config);
</script>

Woosmap Address Parameters

As for Woosmap Localities, Woosmap Address support the language to return the address elements in.

To restrict your results to specific areas, you can use the parameter addressComponentRestrictions to filter over countries. Countries must be passed as three characters string (ISO 3166-1 Alpha 3).

const config = {
    woosmap: {
        language: "UK",
        addressComponentRestrictions: {country: ['GBR', 'FRA']}
    }
};   

Add Listener on Selected Woosmap Address Predictions

When a user select a Woosmap Address from the list of autocomplete predictions, an event is fired with a Woosmap Address object. You’ll need to register on the Input text two EventListener named 'autocomplete-woosmapaddress-selectcomplete'.

<script>
    document.getElementById('my-input').addEventListener('autocomplete-woosmapaddress-selectcomplete', ({addressDetails}) => {
        console.log(addressDetails.formatted_address);
    });
</script>

Sample

Open this Sample on CodeSandbox to see code.