# Free address lookup plugin for your website

> Add a free address lookup script to your website to reduce the number of address fields you need to display to the customer.

Published: 2019-12-13 · Updated: 2022-08-05 · Author: John Slater · Canonical: https://www.slaterjohn.com/free-address-lookup-script

---

Adding an address auto-complete field or postcode lookup, as they are sometimes referred to, is not as difficult as you may first think. I’ve created a simple, free to use, plugin/widget that can be added to your website with little code knowledge needed.

![Image showing a text input field with auto-complete addresses in a list below with a cursor hand over the first address in the list.](https://www.slaterjohn.com/images/2020/11/Hero-4.png)

In my work on the checkout flow for the EKM platform we found that the number of form fields a customer is faced with directly affects how likely they are to complete the form. We reduced the number of fields using a post code lookup service.

Post code lookup is great, but it only really works if you’re in a country with a post code system and the one used on EKM only works with UK addresses.

## Cheaper and simpler alternative to post code lookup

For a recent client project I implemented an inexpensive address lookup powered by Google Maps and it’s worked well for that client because their customer details page only needs to have 3 required fields – name, email address and address (which is an auto complete).

In my spare time I decided to rewrite the address lookup in a more generic way so it can be slotted into any website that has standard address fields (address line 1, address line 2, town/city, county, post code and country).

### Cost per lookup

- Google Cost: **0.21p per request**
- EKM Postcode Lookup: **10.79p per request** (100 lookups for £10.79 package)

_Note: With Google a single address lookup could consist of multiple requests. But to even match the post code lookup cost each address would need to result in over 50 requests – which is unlikely._

## What is address lookup?

![Wireframes comparing a postcode lookup field and button with an address autocomplete suggestion list](https://www.slaterjohn.com/images/2020/11/Postcode-Lookup-vs-Address-Lookup.png)

Address lookup is better than post code lookup for a few reasons:

1.  You can search for international addresses
2.  Users are encouraged to type their address naturally – starting at the beginning – whereas postcode lookup asks for the last line first.
3.  It’s one field only
4.  Users don’t need to select their address from a list of houses on their street

## Demo

I’ve included a demo of how the address lookup works. Start typing your own address and you’ll start to see suggestions.

[CodePen demo](https://codepen.io/slaterjohn/pen/abzZeOe)

## Download

You can download the free address lookup script from [GitHub](https://github.com/slaterjohn/js-address-lookup) or just copy the code from the tutorial below.

[Code can be found on CodePen](https://codepen.io/slaterjohn/pen/abzZeOe)

## Setting up address-lookup

For this setup we assume that you’re able to edit the javascript file options and HTML to match your field setup.

If you’re unable to get this working with your existing form feel free to send me an email and I’ll help set it up for you.

### Google Cloud Platform

This plugin is powered by Google Maps data and therefore you will need a free Google Cloud Platform account.

When you signup Google give you a free $300 credit for your first year. Depending on how many lookups your users perform will depend how long that credit lasts for.

1.  Create your **[Google Cloud Platform](https://cloud.google.com/)** account (it’s free)
2.  In the menu click **APIs & Services**
3.  Click **Enable APIs & Services**
4.  Enable **Maps JavaScript API**
5.  Enable **Places API**
6.  In **APIs & Services** go to **Credentials**
7.  Click **Create credentials (API key)**
8.  Save your key somewhere for later

Lastly there are some optional but recommended steps:

1.  Click **Restrict Key**
2.  Name your key **AddressLookupScript**
3.  Under Application restrictions select **HTTP referrers (websites)**
4.  Add an item
5.  Enter the URL of the page you’ll use this script on
6.  Under **API restrictions** select **Restrict key**
7.  Select **Maps Javascript API** and **Places API**
8.  **Save**

### Setup the script

You’ll need to make a few edits to the Javascript options in order to get this script to work with your Google Account.

In the Javascript you’ll need to edit `line 10` and replace the API key in the example with your own.

```js
googleCloudAPIKey: 'AIzaSyBVrqGDBqE85jvuaOO6-bXBTywbfCzoET0',
```

### Address fields

If you’re unfamiliar working with Javascript and cannot get the Javascript working with your existing form then you should use the HTML, CSS and Javascript from the demo and tweak your form around that.

```html
<fieldset class="jls-manual-address jls-manual-address--hidden">...</fieldset>
```

In the HTML you’ll notice a `<fieldset>` element that contains all the standard address fields. When an address is selected each of the fields gets a value added. These are also the fields that show when the user edits the address manually.

If you’re implementing this script into an existing form then you may need to adjust the field names in the Javascript options.

```js
manualFieldNames: {
    address_line_1: 'address_line_1',
    address_line_2: 'address_line_2',
    city: 'city',
    county: 'county',
    postcode: 'postcode',
    country: 'country'
}
```

### Errors

If, after editing the API key, you’re unable to perform any lookups without a tiny little error icon appearing then it’s likely down to your Google Cloud Platform settings and probably the URL of your website that is incorrect.

---

## Setup service

If you’re having trouble getting this setup on your website or EKM shop feel free to get in touch, I’d be happy to help.

You can use this address lookup as an alternative or replacement to EKM Postcode Lookup feature. This has successfully been installed on a number of EKM shops and those shop owners are very happy because it’s saving them a lot of money and increasing their conversions.