Skip navigation

Tutorials

How to add a map to a UK address lookup in an online form

Page 1 of 2

We are noticing an increasing demand for maps to be included with address lookup functions such as "Find my Nearest" applications.

Providing a map of a location helps your customers to find out where the business or shop is located, is more professional and, let's be honest, it looks cool to have a map on your web page!

This article demonstrates how a map can be displayed following an address lookup using the PostCoder® Web SOAP service and the Google Maps API. Similar results can be achieved using other mapping services but this is the one we use on our web site and hence are more familiar with.

Since the service uses SOAP to communicate, any host that provides a server side scripting language with an available SOAP client can be used.

The example code provided with PostCoder® Web SOAP is available in PHP (4 and 5), ASP.NET (C#, VB), ASP, Perl, Java and ColdFusion. The principles in this article can be used with any of the example languages, but here we'll use a PHP script as supplied with the PostCoder® Web SOAP examples. In order to finish up with a fully working set of pages you should create all your pages in the same directory as the PostCoder® Web SOAP PHP examples because there are some dependent style, script and image files included with the examples.

Note: Style and accessibility code has been omitted for clarity.

Set up the address lookup capability

Let's assume that your existing page includes the following structure:

<html>
<head>

</head>
<body>
<form>
[address collection inputs]
<input type="submit" />
</form>
</body>
</html>

Such as:

Address Details 1

Figure 1 - Basic address collection form

To add the address lookup feature without affecting your existing form, we can add a hidden form to your page, used solely to post the address search string to an address lookup script.

<form name="PostcodeForm" method="post" action="getPremiseListGoogleMapsExample.php" target="addresslookup">
<input type="hidden" name="postcode" />
<input type="hidden" name="identifier" value="Example - getPremiseList with Google Map" />
</form>

The target of this additional form is an iFrame which is used to display a list of premises and, once a premise is chosen, a map of the area:.

<iframe id="addresslookup" name="addresslookup" width="340" height="340" scrolling="no" frameborder="0"></iframe>

Note that this iframe has been designed to be large enough to hold a reasonable sized map.

In addition to the input search string 'postcode', an 'identifier' can be used within PostCoder Web SOAP. This identifier can be set to any string and is used within statistics reports to distinguish between different address lookup forms. For example, your brochure request form could have the identifier 'brochure' and your delivery address form could have the identifier 'delivery.'

A simple input box and search button can be added to your address form, where the action of the button is a JavaScript function which populates the 'postcode' in the 'PostcodeForm' form and submits the form to the lookup page.

<input maxlength="10" type="text" name="pcode" size="12" />
<input id="searchbutton" type="button" value="Find Address" onclick="findaddress(this.form.pcode.value)" />

The code for your modified page should now resemble:

<html>
<head>
	[Javascript function findaddress – see Addendum for code]
</head>
<body>
<form name="PostcodeForm" method="post" action="getPremiseListGoogleMapsExample.php" target="addresslookup">
<input type="hidden" name="postcode" />
<input type="hidden" name="identifier" value="Example - getPremiseList with Google Map" />
</form>
<form name="contactDetails" action="#">
<input maxlength="10" type="text" name="pcode" size="12" />
<input id="searchbutton" type="button" class="button" value="Find Address" onclick="findaddress(this.form.pcode.value)" /><br />
<input maxlength="40" type="text" name="organisation" size="30" value="" /><br />
<input maxlength="40" type="text" name="address1" size="30" value="" /><br />
<input maxlength="40" type="text" name="address2" size="30" value="" /><br />
<input maxlength="40" type="text" name="address3" size="30" value="" /><br />
<input maxlength="40" type="text" name="address4" size="30" value="" /><br />
<input maxlength="40" type="text" name="town" size="30" value="" /><br />
<input maxlength="40" type="text" name="county" size="30" value="" /><br />
<input maxlength="10" type="text" name="postcode" size="30" value="" /><br />
</form>
<iframe id="addresslookup" name="addresslookup" width="340" height="340" scrolling="no" frameborder="0">
</iframe>
</body>
</html>

With appropriate styling elements it could look like this:

Address Details 2

Figure 2 - Address collection form with autocomplete and space for Google Map

A few modifications are required to the script file, getPremiseListExample.php, which is supplied with the examples. In order to preserve the original example code I suggest saving a copy as getPremiseListGoogleMapsExample.php. The username and password as provided when registering for the PostCoder® Web SOAP service must be entered, and the JavaScript function updateddress() may need to be updated to reference your address form with the correct input names:

// update the main address form with the correctly formatted, selected address.
parent.document.contactDetails.organisation.value = jsaddressList[num][0];
parent.document.contactDetails.address1.value = address[0];
parent.document.contactDetails.address2.value = address[1];
parent.document.contactDetails.address3.value = address[2];
parent.document.contactDetails.address4.value = address[3];
parent.document.contactDetails.town.value = jsaddressList[num][6];
parent.document.contactDetails.county.value = jsaddressList[num][7];
parent.document.contactDetails.postcode.value = jsaddressList[num][8];

Entering a postal code and clicking the button will run the JavaScript function findaddress() which will populate the hidden inputString input and post the form to the script getPremiseListGoogleMapsExample.php within the iframe.

The getPremiseListGoogleMapsExample.php script will send the postal code to the PostCoder Web SOAP service via a SOAP message and will receive back the full address and all premises of that postal code. The script then generates a clickable list of premises for your user to select from.

When the user clicks on an address from the list, the JavaScript function updateddress() is called and this populates the fields of your form.

At this stage you should have a functioning form (perhaps not quite as pretty as the picture below!), but without the Google Map:

Address Details 3

Figure 3 - Address collection form in action

Back to Top