Try it yourself

Type an address and see the autocomplete in action.

Selected address

Select an address to see the result

Two ways to integrate

Pick the method that fits your project. The result is the same.

Data Attributes

Zero JavaScript

Add data attributes to an input and it works instantly. No JavaScript needed. 

<!-- Load the script -->
<script src="/places-autocomplete.js"></script>

<!-- Add data attributes -->
<input
  type="text"
  data-places-autocomplete
  data-places-api-key="pk_live_xxx"
  data-places-country="NL,BE,LU"
/>

JavaScript API

Full control

Initialize via JavaScript for more control over options and behavior. 

const input =
  document.getElementById("address");

PlacesAutocomplete.init(input, {
  apiKey: "pk_live_xxx",
  country: "NL,BE,LU",
  limit: 5
});

input.addEventListener("places:select",
  (e) => console.log(e.detail)
);

Ready to integrate?

Create a free account and get an API key immediately.

Start for free View the docs