Address lookups with Loqate

Loqate, formerly known as Post Code Anywhere, is a solution offered by GBG that provides a variety of location-related services, such as address validation and look-up. It allows your website to populate various address fields based on a partial search.

Look-up example from loqate.com

If you’re only interested in the look-up functionality, here’s how you can get it to work quickly.

Get a Loqate account

First off, you need to have a Loqate account, which you can create on their website. For testing out the functionality, you can sign up for a free trial. This gives you about two weeks to play with the service, with some 50 look-ups allowed per day.

Once you’ve created an account, you need to add a service. The first time you do this, Loqate prompts you to complete GDPR compliance.

Bad: The way of the wizard

The first thing you will notice is this big, inviting-looking button:

Address, Email and Phone verification with “Start setup”

If you click “Start setup”, Loqate takes you through a wizard that involves copying some code to your website, after which it attempts to load your site into a frame. This allows some kind of visual walkthrough. However, I have found this approach to be clunky and practically unusable — which is why I recommend following the guide for developers instead (see below).

Good: The way of the developer

The Advanced Setup Guide under Loqate’s developer documentation provides all the steps you need to set up an address look-up. In summary:

1. Copy the <rel> and <script> tags onto your page, but watch out! Make sure you replace http with https in the URLs given by the guide. Otherwise, Chrome is liable to complain about “unsafe scripts” on your site.
2. Populate an array of fields, fields, based on your address form. Note that fields without a mode set will search by default, so if you have a dedicated look-up control, I suggest leaving the mode out for that.
3. Declare a JSON object, options, that has a key property set to your API key (you will find this on your Loqate account).
4. Create a new instance of pca.Address, passing in your fields and options variables as parameters.

The guide does not state this, but for the address look-up to work, I had to also call load() on the address object, e.g.

var addressControl = new pca.Address(fields, options);
addressControl.load();

Warning: When mapping your elements in the options object, be aware that Loqate does partial matches when it looks up your elements, so take care that none of the names ends up ambiguous.

If you’re not sure where to find your API key, there should be a big fat “API Key” button on your account landing page.

The “API Key” button.

Note: If you’re coming from when Loqate was still known as Post Code Anywhere, you should be able to use your existing API key.

Restricting use of the API key

Because your API key is visible in the client code, you should limit which websites are allowed to use it. This is handled as a setting on your account.

Limit by URL

1. Log into your Loqate account.
2. Click the “API Key” button and navigate to the “Limits” page.
3. In the “Limit by URL” section, enter the URL for your website and click the plus icon. Save yourself some hassle by keeping the URL as general as possible (i.e. just “www.example.com” instead of the specific page).
4. Remember to click the Save button.

Styling update!

In the age of responsive websites, I was surprised to find that the Loqate address look-up doesn’t play well with smalls screens. To stop the dropdown box from popping off the screen, I put the following in my CSS file:

.pcaautocomplete.pcatext {
  max-width: 238px;
}
.pca .pcaitem {
  white-space: normal !important;
}

Without the white-space override, the address text can overlap with the > buttons at the edge of the box.

Used for this article:

• Loqate Address 3.70