Address autocomplete

Address Autocomplete – fast and smart address suggestions

Get address suggestions while typing. Use our step-by-step tutorials or npm-packages to integrate Address Autocomplete to your map solution or app. Check found location type and confidence rate for results.

NPM-packages for easy integration

Easy to add and easy to customize. Check our code samples for quickstart.

@geoapify/geocoder-autocomplete

Vanilla JS npm-package. Adds an Address Autocomplete field to a given element (for example, div). Contains several styling options, including bright and dark ones.

@geoapify/angular-geocoder-autocomplete

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

@geoapify/react-geocoder-autocomplete

React wrapper for @geoapify/geocoder-autocomplete. Provides a react component, inputs and outputs for Address Autocomplete parameters.

Multi-language support

Get results on your language.

Easy to visualize

The Address Autocomplete end-point returns a GeoJSON object a result. Use our code sample showing how to visualize the results on a map.

Filters and biases

Set filters and biases by visible area, by radius or by country to narrow the search area and get predictable results.

FAQ

How do you bill autocomplete results?

The geocoder autocomplete requests are billed as geocoding requests.

Which geocoder engine do you use for autocomplete?

We use a combination of Pelias and Nominatim geocoder engine to provide you the best results.

Why do you have a separate end-point for autocomplete? How the autocomplete results are different from the forward geocoding search?

The goal of autocomplete end-point is to provide fast and misspelling-tolerant address suggestions, that can be reviewed by a human. The forward geocoding search tries to return results corresponding the most. This can take more time and be slower.

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

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

Reverse Geocoding API

Reverse Geocoding API – get address by coordinates

We offer Reverse Geocoding API for single and batch requests. Get address, location type as well as the distance to the latitude and longitude provided. Get one or multiple results.

Easy to use

The API works via HTTP and can be used on every platform and with every programming language. The API returns GeoJSON objects as a result which can be natively visualized by the most client map libraries, including Leaflet, Mapbox GL, and Open Layers.

Single and batch requests

Together with single requests, you can send batch Geocoding requests (up to 1000 row at once). Moreover, we provide special pricing plans for Batch Geocoding that let you save up to 50% on Geocoding API costs.

Multi-language

Multi-language

Specify language parameter for reverse geocoding request and get results on your language.

Learn more about supported languages >>

Pricing plans

Affordable for every business

We have a Freemium model and pricing plans for different volutes and rates. You can register and start for Free and upgrade when you need it.

FAQ

How can I call Reverse Geocoding API for batch requests? What is the difference single and batch requests?

The difference between single and batch requests is that batch requests are called asynchronously. You create the batch job first and query results afterward. Learn more about batch requests >>
Use our API Playground to generate a batch request. Check our code samples showing how to call the API and get batch results.

How can I get not building but streets as the result?

The Reverse Geocoding API’s main purpose is to provide information on what is located on the coordinate provided and the address of the location. That’s why building and amenities have bigger priorities that streets.
Map Matching API (currently available on request) that matches GPS coordinates to roads and paths can fit better in your case.

Can I you Free plan for commercial project?

Yes, but you need to provide a follow-link to Geoapify on your website. For example, “Powered by <a href="https://www.geoapify.com/">Geoapify</a>" near information about Geocoding service.

Can I cache reverse geocoding results?

Yes, we do not have restrictions on that.

Batch geocoding requests

Batch geocoding

Batch geocoding requests

Process up to 1000 addresses or coordinates in one request with our batch or bulk geocoding

Geoapify provides an API that allows you to process multiple Geocoding / Reverse Geocoding requests in a single asynchronous call. This gives you an opportunity to decrease Geocoding costs and search locations and their addresses at a lower price.

We have a Freemium pricing model. You can start for Free and upgrade when you need it.

Both Direct and Reverse Geocoding

You use the Batch service for both Direct and Reverse Geocoding requests. All API parameters are also available for the Batch requests. Moreover, you can set some parameters as the common one and others as unique per input. For example, with the Geocoding API, you can add a country filter and make it common for all inputs.

Asynchronous call

All batch requests are asynchronous jobs. First, a batch API endpoint call with specified inputs creates a job. Then the job execution is monitored with additional API calls. As soon as result is available it’s returned in the response.

Batch geocoding request schema
Batch service schema

The job results are available for 24 hours and can be queried multiple times.

More volumes at a cheaper price

All batch requests to the Geoapify platform have a lower price. For example, all batch geocoding requests are counted with a coefficient of 0.5 (two times cheaper) for all Platform tariff plans. Moreover, we have special Geocoding tariff plans that let you significantly decrease costs for big volumes.

Easy integration

We provide Code Samples and the Batch Playground that let you easily integrate the solution into your project. Contact us if you have any questions, ideas, or wishes.

Address autocomplete component – npm package

Get a location from an address and address from a location – this is the main purpose of the Geocoding API. However, it’s not how it’s usually used in real-life. In real-life people enter one by one symbol into address autocomplete field, get suggestions and select the correct result there.

We already published articles describing how to create an address autocomplete from scratch with JSFiddle code samples. In this article, we would like to introduce you to an npm package that allows adding geocoding with autocomplete into your project with a few lines of code only.

We’ve developed a base Geocoding Autocomplete JS Library, that turns a DIV-container into an Address field with autocomplete. Moreover, we’ve added components for React and Angular that wrap the JavaScript library and provide a convenient interface for it.

All 3 packages use Geoapify Geoacoder API as the geocoder and support all parameters of the API:

  • You can make the autocomplete show only countries, cities, states, streets, or amenities;
  • Set location bias. So the autocomplete will return first results near the location;
  • Choose between different languages. For example, depending on the language you will get “Germany”, “Deutschland”, “Allemagne” or “Германия” in the search results;
  • Filter results. For example, search only in given countries.

You require your own API key to make Geocoding API calls. Get an API key on MyProjects Geoapify. The APIs have the Freemium pricing model. So you can start for Free and extend when you need.

@geoapify/geocoder-autocomplete

Geoapify Geocoder Autocomplete is the lightweight JavaScript library, that lets you add an address input with autocomplete into your web app. It has 0 dependencies and easy to customize. Furthermore, it already includes a few style themes for both light and dark backgrounds.

Installation

npm install @geoapify/geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete

Usage

  • Prepare a DIV-container with position: relative:
.autocomplete-container {
    position: relative;
}
<div id="autocomplete" class="autocomplete-container"></div>
  • Add Geoapify Geocoder Autocomplete:
import { GeocoderAutocomplete } from '@geoapify/geocoder-autocomplete';
 
const autocomplete = new GeocoderAutocomplete( document.getElementById("autocomplete"),  'YOUR_API_KEY', { /* Geocoder options */ });
 
autocomplete.on('select', (location) => {
    // check selected location here 
});
 
autocomplete.on('suggestions', (suggestions) => {
    // process suggestions here
});
  • Add styles to make the control work properly. For example, you can do it by importing style into your css-file:
 
@import "[email protected]/geocoder-autocomplete/styles/minimal.css";

You can easily customize the input. Read more about provided themes and CSS-classes on @geoapify/geocoder-autocomplete page.

@geoapify/angular-geocoder-autocomplete

Geoapify Angular Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides easy to use interface for it. Instead of functions and callbacks, the component lets you work with Angular Inputs and Outputs.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/angular-geocoder-autocomplete

Usage

  •  Import the GeoapifyGeocoderAutocompleteModule module:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { GeoapifyGeocoderAutocompleteModule } from '@geoapify/angular-geocoder-autocomplete';
 
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    GeoapifyGeocoderAutocompleteModule.withConfig('YOUR_API_KEY')
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
  • Import Geoapify Geocoder Autocomplete styles. For example, in ‘angular.json’:
"styles": [
    ...
    "node_modules/@geoapify/geocoder-autocomplete/styles/round-borders.css",
    "src/styles.scss"
],
  • Add the component into your template:
<geoapify-geocoder-autocomplete 
    [value]="displayValue"
    [type]="options.type"
    [lang]="options.lang"
    [countryCodes]="options.countries"
    [position]="options.position"
    [limit]="options.limit" 
    (placeSelect)="placeSelected($event)" 
    (suggestionsChange)="suggestionsChanged($event)">
</geoapify-geocoder-autocomplete>

@geoapify/react-geocoder-autocomplete

Geoapify React Geocoder Autocomplete is an Angular component that wraps the Geoapify Geocoder Autocomplete and provides access to all API parameters via the component properties.

Installation

npm install @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

or

yarn add @geoapify/geocoder-autocomplete @geoapify/react-geocoder-autocomplete

Usage

  • Create the GeoapifyContext and set you API key there;
  • Import Geoapify Geocoder Autocomplete styles;
  • Add GeoapifyGeocoderAutocomplete to your code:
import React, { useState } from 'react'
import { GeoapifyGeocoderAutocomplete, GeoapifyContext } from '@geoapify/react-geocoder-autocomplete'
import '@geoapify/geocoder-autocomplete/styles/minimal.css'
 
const App = () => {
  ...
 
  function onPlaceSelect(value) {
    console.log(value);
  }
 
  function onSuggectionChange(value) {
    console.log(value);
  }
 
  return <GeoapifyContext apiKey="YOUR_API_KEY_HERE">
      <GeoapifyGeocoderAutocomplete placeholder="Enter address here"
        type={type}
        lang={language}
        position={position}
        countryCodes={countryCodes}
        limit={limit}
        placeSelect={onPlaceSelect}
        suggestionsChange={onSuggectionChange}
        />
    </GeoapifyContext>
}
 
export default App

Address field with autocomplete – step by step tutorial with JSFiddle example

Adding an address field ideally with autocomplete is a very common task for web-developer. And even if there are libraries providing components and “ready-to-use” solutions they often are difficult to style, missing some functionality required and need to be maintained. Moreover, when you start to use a component “from-a-box” you bind yourself with the exact API provider.

In this tutorial, we propose you to create an address field with autocomplete with Vanilla Javascript only. We use the Geoapify Geocoding service to convert addresses into locations and JSFiddle for a playground.

Before you start

Register and get an API key for free on MyProjects Geoapify. We have a Freemium pricing model, so you can start for Free and extend when you need it.

We provide an API key for JSFiddle example and you can reuse it for other JSFiddle examples. However, you require your own API key to make API calls from your own application.

Step 1. Create an input field in a provided HTML-container

  • We start just with a DIV-element, which is positioned relatively;
  • Let’s create an input field inside the container and make it spread full width:

Step 2. Send a geocoding request on user input and show a dropdown list with results

  • Now let’s add a user input event and send a geocoding request when the event is fired;
  • As the geocoding result comes asynchronously we need to cancel the previous request if the user input changes;
  • We create a DIV-element with geocoding results and show it as a dropdown to the input element;
  • We hide the dropdown list on new user input:

Step 3. Select an option and notify when an option was selected

  • Now let’s make options clickable and notify about selected option;
  • We add a callback parameter to the addressAutocomplete() to get notifications:

Geoapify Geocoding API returns results in GeoJSON format. Learn more about GeoJSON feature properties on the Geocoding documentation page.

Step 4. Add clear button

The Geocoding Autocomplete is functional now, but not user-friendly enough. Let’s improve this!

  • Add a clear button to the input field;
  • Hide the button when input is empty;
  • Send notification when the text was cleared:

Step 5. Add keyboard navigation support

It would be great to have the possibility to navigate the address field with a keyboard.

  • Let’s add a listener for arrow UP, arrow DOWN and ENTER key;
  • We are going to navigate and send notifications when a user navigates the dropdown list;
  • The focused item in the dropdown list is highlighted with a background color. We store the index of the focused element in the focusedItemIndex;
  • We close the dropdown list when the user presses ENTER:

Step 6. Make the dropdown list responsive

At the moment the dropdown is opened when a user types in the input field and closed only when an option was selected. Let’s close the dropdown list when a user clicked outside the input control and show the dropdown list again when the control is clicked again:

Step 7. Search countries, cities, streets

Geoapify Geocoding API allows specifying a type for locations. Let’s add a parameter for the addressAutocomplete() that limits the search to the specific location type:

Geoapify Geocoding API parameters

With Goeapify Geocoding you can make your search more concrete:

  • Search by exact address type. For example, search only countries, cities or streets.
  • Limit the search to a list of counties.
  • Search around a given location.
  • Change the language of results.

Learn more about Geoapify Geocoding API parameters and options.

Real estate

Maps and location intelligence for real estate and rental search websites

Property and real estate search websites and portals like Zillow, Trulia or Rightmove have disrupted the real estate market in the past decade. They made it much easier for both sides on the market to find each other.

Initially, the key to success was to have broadest and comprehensive property listings. As the number of global and regional websites was increasing, focus moved to offer best-in-class features to win the competition.

Having broad and detailed property listings is not enough anymore. Visitors expect smooth and highly visual experience, rich contextual data and powerful search, filtering, and ranking functionality.

To stand out, property search websites need to provide the most contextually relevant results, location insights, and additional services. And more often than not the area, connectivity, and surrounding amenities are more important than property features alone.

Geoapify offers a unique combination of feature-rich APIs that can help to address these requirements and greatly increase visitor’s engagement

Maps

Our highly dynamic, customizable maps can be styled to perfectly match your website design and branding. Thanks to compatibility with most map visualization libraries and permissive usage policy, you can easily use our maps with any technology, data set, or usage scenario.

Location search

Our Geolocation and Geocoding APIs can help to identify search areas based on visitor location, as well as parse, validate and locate address data he or she enters into the search form.

Reachability analysis

When most property search websites only offer filtering by bounding box or radius, Geoapify Reachability API allows filtering by much more precise, realistic travel time areas. For most urban areas our Reachability API helps to eliminate unreachable place and discover places that would normally be filtered out by the more primitive distance based search.

Public transport reachability in Munich, Germany
Public transport reachability in Munich, Germany

Filtering by boundaries

With our Geometry API, you can offer advanced filtering capabilities that include a combination of reachability areas, user-defined and administrative boundaries.

Statistics and data

Geoapify Statistics and Data APIs can enrich the results with the census, economics, age, and other population-related data. Our Places and Boundaries APIs give a comprehensive listing of amenities in the given area or near the property.

Multiple data sources

Our platform can operate with spatial data from different sources to generate very personalized listings – for instance, only show the properties located in an area with a higher income population and schools reachable within 30 minutes of walking.

Commute and areas close to Park&Ride in Berlin, Germany
Commute and areas close to Park&Ride in Berlin, Germany

Solutions and use-cases

We’ve prepared some examples of solutions that can bring your real-estate website to success

Location intelligence

Location intelligence

Location intelligence for smart place search Use geospatial methods and algorithms to find the optimal place Looking for a place to live, a new office or preparing for vacations? Then a good location is one of the most important components...
Travel time maps

Travel time maps

Travel time maps Travel time maps or driving time maps or isochrones show how far can you go from a location within a certain time Travel time is one of the most important criteria when you choose a location. That’s why a travel time m...

Geoapify provides a platform, products, and services to help you benefit location intelligence

  • Check our Maps API that allows developing a map from scratch.
  • Try our Mapifator map builder that can be used to create a custom map with a graphical interface.
  • Or contact us and we will advise you the best fitting to your use case technologies and provide a turn-key solution for you!