Address autocomplete form example

Address Autocomplete API

The Address Autocomplete API provides suggestions for addresses as you type. So, if you write "Munic", it will return "Munich, Bavaria, Germany" and more address tips to choose from.

The API is intended to be used in address autocomplete inputs, for example, for address validation HTML forms. It returns verified and standardized addresses for free-form addresses entered by users.

You can use the Address Autocomplete API to autofill addresses, cities, postcodes, and other address levels. You can also set biases and filters for your search to provide even more accuracy.

Try Address Autocomplete

Type an address to try the location autocomplete:

We use the @geoapify/geocoder-autocomplete library for this demo. Try more API options with the Address Autocomplete Playground >>

Features and capabilities

Well-formatted address and coordinates by an address string or its part

The API returns the well-formatted addresses, including separate address components like house number, street, postcode (or zipcode), city, state, country, and latitude/longitude coordinates.

Here is an Autocomplete API URL example for the "Gabelsbergerstr 14, Regensburg" address string:

https://api.geoapify.com/v1/geocode/autocomplete?text=Gabelsbergerstr%2014%2C%20Regensburg&format=json&apiKey=YOUR_API_KEY

Please note that the address should be URL-encoded as part of the URL.

The API returns all the locations corresponding to the address, the original query including parsed address, formatted addresses, and components:

    • [] 4 items
      • {} 19 keys
        • "de"
        • "14 b"
        • "Gabelsbergerstraße"
        • "Germany"
        • {} 4 keys
          • "93047"
          • "Bavaria"
          • "Regensburg"
          • "Regensburg"
          • 12.105486
          • 49.015503
          • "Kasernenviertel"
          • "Gabelsbergerstraße 14 b, 93047 Regensburg, Germany"
          • "Gabelsbergerstraße 14 b"
          • "93047 Regensburg, Germany"
          • "building"
          • "building"
          • {} 5 keys
            • "51295fd0420236284059b5fe9600fc814840f00102f9014bcfa81900000000c00203"
          • {} 19 keys
            • {} 20 keys
              • {} 20 keys
              • {} 2 keys
                • "Gabelsbergerstr 14, Regensburg"
                • {} 4 keys

              In addition, the result object contains place ids. You can pass the ids to Place Details API to get building geometries, contact details, website, and other information.

              Autofill postcodes (or zip codes) and other address levels

              The Autocomplete API accepts location type as a parameter so that you can create postcode, city, country, and other autocomplete inputs. Here is an example of Postcode Autocomplete URL of searching postcodes starting with "863" in Germany:

              https://api.geoapify.com/v1/geocode/autocomplete?text=863&type=postcode&filter=countrycode:de&format=json&limit=20&apiKey=YOUR_API_KEY

              The default number of returning results is 5. But you can increase the limit to get more results.

              The API request found 7 postcodes starting with "863":

                • [] 7 items
                  • {} 16 keys
                    • "postcode"
                    • "Westheim"
                    • "Neusäß"
                    • "Augsburg (district)"
                    • "Bavaria"
                    • "86356"
                    • "Germany"
                    • "de"
                    • {} 4 keys
                      • 10.821951117
                      • 48.390140158
                      • "86356 Neusäß, Germany"
                      • "86356 Neusäß"
                      • "Germany"
                      • {} 3 keys
                        • "51f1d9dcc6d6a4254059afbbd91cf0314840f00101f901ba36380000000000c00207"
                      • {} 15 keys
                        • {} 15 keys
                          • {} 15 keys
                            • {} 15 keys
                              • {} 16 keys
                                • {} 15 keys
                                • {} 1 key
                                  • "863"

                              The type parameter accepts values like "country", "state", "city", "postcode", "street", "amenity" . Visit the docs page to learn more.

                              Easy to use and integrate

                              The Address Autocomplete API works via HTTP GET requests, so it's cross-platform, and you can integrate it into any website or app. Moreover, the API returns a JSON object, which any map library can easily visualize: MapLibre GL, Leaflet, OpenLayers, and others.

                              Each address suggestion contains a formatted address for the complete address and address parts that can be used to set a visual focus for the primary and secondary address parts:

                              Highlight the primary and secondary parts for addresses

                              Highlight the primary and secondary parts for addresses

                              Ready-to-use JavaScript libraries

                              In a few minutes, you can add an address autocomplete field to your website using @geoapify libraries:

                              The libraries are open source, so you can use them in their current form or as an example when developing your own implementations.

                              Multilanguage support

                              The Address Autocomplete API supports multiple languages. So you can show address suggestions in their language to your customers.

                              Here is a URL example of Address Autocomplete API with language parameter:

                              https://api.geoapify.com/v1/geocode/autocomplete?text=Berlin%20central&limit=5&lang=de&apiKey=YOUR_API_KEY

                              You can get the user language settings, for example, from the browser language preferences:

                              const language = window.navigator.userLanguage || window.navigator.language;

                              Biases and filters to search nearby

                              The Autocomplete API allows setting preferred locations - bias and filters - by view box, by radius, within a country. This could be useful when you implement "Search nearby", "Search within the visible area", or when you need to limit the search to the specific area. You can try the filters and biases in the Address Autocomplete Playground.

                              Place details with Place Details API

                              The Autocomplete API returns a Place ID that can be used to get detailed information about the place and the building geometry or boundaries with Place Details API. For example, here are the boundaries of the City of London: Get Place Details for the "City Of London" address suggestion

                              Get Place Details for the "City Of London" address suggestion

                              Affordable and permissive

                              The Geoapify Address Autocomplete API is based on open-data sources. So we can offer you permissive conditions and affordable prices.

                              Our Free Tier includes up to 3000 address autocomplete requests per day (~ 90000 requests/month). In addition, you can cache and store address results and suggestions.

                              Getting started

                              1. Register and get an API Key

                              You will require an API Key to use the API:

                              • register on MyProject Geoapify page
                              • create a new project
                              • switch to the "API keys" page and get an API key
                              2. Add an address input field with Autocomplete function

                              The API returns a few address suggestions for user input. First, you call the API when the user types into the input. Then you need to show results in the dropdown or other list.

                              We've prepared a step-by-step tutorial on adding an Address Autocomplete field and NPM-packages for you that help you integrate the API into your website or app:

                              VanillaJS

                              @geoapify/geocoder-autocomplete

                              Vanilla JS npm-package transforms a given element (for example, div) into an Address Autocomplete field. In addition, the library offers several CSS styling options, including bright and dark ones.

                              Angular

                              @geoapify/angular-geocoder-autocomplete

                              Angular wrapper for @geoapify/geocoder-autocomplete. Provides an angular component, inputs and outputs for Address Autocomplete parameters.

                              ReactJS

                              @geoapify/react-geocoder-autocomplete

                              React wrapper for @geoapify/geocoder-autocomplete. The library provides a react component with fields corresponding to Address Autocomplete API parameters and events.

                              You can use these packages with or without a map library (Maplibre GL, Leaflet, OpenLayers). Furthermore, you can customize the look-and-feel of the components with provided styles or with custom CSS. Check our code samples for quickstart >>

                              FAQ

                              How is the Address Autocomplete API different than Geocoding API?

                              The Autocomplete API returns address suggestions for the provided address string, while the Geocoding API searches the corresponding location for the given address. The Address Autocomplete works with partial addresses and tries to guess the address, while the Geocoding API assumes that the full address was provided.

                              How to use Address Autocomplete API?

                              Address Autocomplete API helps to create address inputs and address verification forms. Call the API when on user input and show address suggestions in a dropdown or another list. Here is a Step-by-Step Tutorial on creating an address autocomplete input with HTML, CSS, and JavaScript.

                              What is the price for Address Autocomplete API?

                              The API price depends on the usage. We have a Free Tier (up to 3000 requests/day), so you can start for Free and extend according to your needs. One Address Autocomplete API is counted as one credit. Check Geoapify Pricing for more details.

                              Can I use the Address Autocomplete for Free?

                              Yes, you can use the Geoapify Autocomplete for Free, even for commercial projects, when you don't go over the Free plan limits.

                              What happens if my website receives a splash of visits and I accidentally go over limits?

                              We have "soft" limits, so we do not ban our customers even if they go over the usage limits. However, we do apply rate limits when you exceed the numbers significantly to protect other customers. Please consider upgrading your plan if you exceed the limits constantly.

                              How often do you release new versions of the npm-packages?

                              We release a new version for bug fixes and further functionality support. Nevertheless, the libraries are open-source, so you are welcome to create a pull request on GitHub.

                              How can I add autocomplete to my address field on my WordPress website?

                              You can easily add the address autocomplete to any CMS website - WordPress, Joomla, WooCommerce, and other. For example, you can integrate @geoapify/geocoder-autocomplete library. Follow the tutorial that demonstrates how to do that.

                              World map

                              Ready to get started?

                              Get an API key and try Geoapify Address Autocomplete!