Zum Inhalt

Einführung in SmartMaps Autocomplete

SmartMaps Autocomplete ist eine JavaScript-Bibliothek, die dynamische Adress- und Standortvorschläge ermöglicht, während Nutzer in Suchfelder oder Formulare auf Ihrer Website oder in Ihrer Anwendung tippen. Sie bietet Nutzern eine intuitive und effiziente Möglichkeit, Adressen einzugeben oder Points of Interest zu finden, indem intelligente Vorschläge in Echtzeit angezeigt werden.

Wichtige Funktionen

  • Intelligente Vorschläge: Während Nutzer tippen, erstellt SmartMaps Autocomplete eine Liste relevanter Adress- und Standorttreffer basierend auf den eingegebenen Zeichen. Die Vorschläge werden bei jedem Tastenanschlag dynamisch aktualisiert, um möglichst genaue Ergebnisse zu liefern.

  • Anpassbare Suchparameter: Passen Sie die Autocomplete-Funktionalität mit verschiedenen Optionen an Ihren spezifischen Anwendungsfall an:

    • Ergebnisse anhand der Nähe oder einer definierten Bounding Box boosten
    • Ergebnisse auf ein bestimmtes geografisches Gebiet oder einen Radius filtern
    • Vorschläge auf bestimmte Länder, Regionen oder Adresstypen beschränken (z. B. Städte, Straßen, Points of Interest)

  • Einfache Integration: Die Einbindung von SmartMaps Autocomplete in Ihre bestehende Website oder App ist unkompliziert. Installieren Sie die Bibliothek einfach über npm, importieren Sie sie in Ihr Projekt, initialisieren Sie sie mit Ihrem API-Key und binden Sie sie an ein Eingabefeld. Die Autocomplete-Oberfläche wird nahtlos eingebettet.

Erste Schritte

API-Key erforderlich

Sie benötigen einen gültigen SmartMaps API-Key. Die Bibliothek übernimmt die Authentifizierung (Token-Abruf) automatisch — Sie müssen lediglich Ihren API-Key übergeben.

Um SmartMaps Autocomplete zu verwenden:

  1. Installieren Sie die Bibliothek über npm:

    npm install --save-dev @smartmaps/autocomplete

  2. Importieren Sie die Bibliothek in Ihr Projekt:

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

  3. Initialisieren Sie Autocomplete, indem Sie einen CSS-Selektor für das Eingabefeld und Ihren API-Key angeben:

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

  4. Verarbeiten Sie die ausgewählte Adresse oder den Standort in der Logik Ihrer Anwendung.

Hinweis: Denken Sie daran, die erforderlichen CSS-Stile aus node_modules/@smartmaps/autocomplete/dist/smartmaps-autocomplete.css einzubinden.

Mit SmartMaps Autocomplete verbessern Sie das Nutzererlebnis auf Ihrer Website oder in Ihrer App, indem Sie die Adresseingabe vereinfachen und präzise Standortvorschläge in Echtzeit liefern. Erkunden Sie die Bibliothek weiter, um ihr volles Potenzial in Ihren Projekten auszuschöpfen.