Skip to content

Introduction to SmartMaps Autocomplete

SmartMaps Autocomplete is a JavaScript library that enables dynamic address and location suggestions as users type into search fields or forms on your website or application. It provides an intuitive and efficient way for users to enter addresses or find points of interest by offering intelligent, real-time suggestions.

Key Features

  • Intelligent Suggestions: As users type, SmartMaps Autocomplete generates a list of relevant address and location matches based on the entered characters. Suggestions are dynamically updated with each keystroke to provide the most accurate results.

  • Customizable Search Parameters: Tailor the autocomplete functionality to your specific use case with various options:

    • Boost results based on proximity or a defined bounding box
    • Filter results to a specific geographic area or radius
    • Restrict suggestions to certain countries, regions, or address types (e.g. cities, streets, points of interest)

  • Easy Integration: Incorporating SmartMaps Autocomplete into your existing website or app is straightforward. Simply install the library via npm, import it into your project, initialize it with your API key, and attach it to an input field. The autocomplete interface will be seamlessly embedded.

Getting Started

To start using SmartMaps Autocomplete:

  1. Install the library via npm:

    npm install --save-dev @smartmaps/autocomplete

  2. Import the library into your project:

    import { createAutocomplete } from '@smartmaps/autocomplete';

  3. Initialize the autocomplete by providing a CSS selector for the input field and your API key:

    const autocomplete = createAutocomplete('#address-input', 'INSERT API-KEY');

  4. Handle the selected address or location in your application's logic.

Note: Remember to include the required CSS styles from node_modules/@smartmaps/autocomplete/dist/smartmaps-autocomplete.css.

With SmartMaps Autocomplete, you can enhance the user experience on your website or app by simplifying address entry and delivering accurate, real-time location suggestions. Explore the library further to leverage its full potential in your projects.