Skip navigation

Tutorials

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

Page 2 of 2

Add Google Maps

Further changes to getPremiseListGoogleMapsExample.php are required to add the Google Maps functionality.

Add the code which sets up the client-side call to the Google Maps API page

Add the buildMapCode function definition before the showPickList function:

function showPickList($result)
{
...................
}

/*********************************************************************
* buildMapcode()
* Sets up javascript function for Google map call.
*********************************************************************/
function buildMapcode($gridsresult){
?>
<script type="text/javascript">
	function displaymap() {
		parent.document.getElementById('addresslookup').src = "google_map.php?long=<?php echo $gridsresult['longitude_etrs89']; ?>&lat=<?php echo $gridsresult['latitude_etrs89']; ?>"
}
</script>
<?php
}

This inserts a javascript function "displaymap" into the client side iframe which makes a call to the server-side page "google_map.php" which in turn calls the Google Maps API. A server-side page is required to handle the call to Google Maps because each Google Maps key only works with a given domain.

Add the triggers for the client-side map call

Now we have the javascript function "displaymap" which can return a Google Map into the client-side iFrame, two scenarios need to be considered:

  • Where a single premise is returned for the Postcode – the map is displayed instead of the address picklist
  • Where multiple premises are returned for the Postcode – the address picklist is displayed and the map is displayed after a particular premise has been selected

Single Premise - in the showPickList function, add a second parameter to the function:

function showPickList($result, $gridsresult)
Still in the showPickList function, just after the call to doJSarray($addressList), add the following code:
	// Check for a single result (in which case display map instead of picklist)
	if (($result['number_results'] == 1) && (sizeof($result['addresses'][0]['premise'])==1))
	{
		// 1 result - dont bother with the list, just show the map.
		if (isset($gridsresult['longitude_etrs89']))
			{
			// Geographic info is available for postcode
			?>
			<script type="text/javascript">
			displaymap();
			parent.toggleFormButton(false);
			</script>
			<?php
		} else { // No geographic info available for postcode
			?>
			<div align="center">
			<br />
			<p>Map not displayed because no geographic info is available for this postcode</p>
			</div>
			<script type="text/javascript">
				parent.toggleFormButton(false);
			</script>
			<?php
		}
		return 0;
	}

Some addresses, such as Post Office boxes, new buildings and large users do not have geographic co-ordinates. If geographic co-ordinates are available for the address, a map is displayed, but if not, a simple text message is substituted.

Multiple Premises - in the showPickList function (towards the end), add a call to the displaymap function:

echo "\n<li><a href=\"javascript:void(0);\" onclick=\"updateddress(".$icount++.");displaymap()\">";

This ensures that whenever an address is selected in the right hand pane, the relevant map is displayed (actually in this example it is always the same map as all premises share the same Postcode).

Add the Latitude/Longitude lookup

Remove the call to the showPickList function:

	        // No SOAP error, check for other error
			if ($result['error_code'] != '0'){
				echo $error_message;
				exit('</form></body></html>');
			}
			//Display the result
showPickList($result);
	    }
	}
Insert additional code here
}

Insert the following code at the point indicated in red above:

	// call the SOAP method for getGrids (for GoogleMap display)
	$gridsresult = $proxy->getGrids($postcode,$identifier,$username,$password);

	// Check for a fault
	if ($proxy->fault) {
	    echo $error_message;
	} else {
	    // Check for errors
	    $err = $proxy->getError();
	    if ($err) {
	        echo $error_message;
			exit('</body></html>');
	    }
		else {
	        // No SOAP error, check for other error
			if ($gridsresult['error_code'] != '0'){
				echo $error_message;
				exit('</body></html>');
			}
	    }
	}

	// Build the code to display the Map
	buildMapCode($gridsresult);
	//Display the result
	showPickList($result, $gridsresult);

This uses the PostCoder® Web SOAP service to look up the latitude and longitude co-ordinates for the Postcode, calls the function which manages the client-side display of the map and calls the function which manages the client-side display of the address pick list.

Add the page which calls the Google Maps API

Finally, we need to create the third page, google_map.php, containing the server-side PHP code which calls the Google Maps API:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body, html{
	padding : 0px;	margin : 0px;
	background : #FFF;
}
#map {
	width: 340px;
	height: 340px;
}
</style>

<!-- Enter your Google Maps Key by replacing KEY with your key in the line below -->
<script src="http://maps.google.com/maps?file=api&v=1&key=KEY" type="text/javascript"></script>

</head>
  <body>
  <?php
  	$nlong = $_GET['long'];
  	$nlat = $_GET['lat'];
  ?>
    <div id="map"></div>
    <script type="text/javascript">
    <!--
    window.onload = showMap;
    function showMap()
	{
    	var map = new GMap(document.getElementById("map"));
    	map.addControl(new GSmallMapControl());
    	map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(<?php echo $nlong ?>, <?php echo $nlat ?>), 3);
map.addOverlay(new GMarker(new GPoint(<?php echo $nlong ?>, <?php echo $nlat ?>)));
    }
    -->
    </script>
  </body>
</html>

Make sure you enter your Google Maps Key (see http://code.google.com/apis/maps/signup.html if you don’t have one) at the indicated place in the above code.

You should now have a set of pages which will display something like this, depending on how you style your page:

Address Details 3

Figure 4 - Address collection form with autocomplete and Google Map

Addendum

Note: In the above description, for clarity the details of the findaddress function were omitted. It, together with related functions clearform and toggleFormButton, is included here:

<script type="text/javascript">
function findaddress(pcode)
{
	if (pcode != ''){
		// disable the button
		toggleFormButton(true);
		// clear the form
		clearform();
	    document.PostcodeForm.postcode.value = pcode;
		document.PostcodeForm.submit();
	}
}
function toggleFormButton(status) {
	var theform = document.contactDetails;
	if (document.all || document.getElementById) {
		var tempobj = theform.searchbutton;
		if (status == true)
			tempobj.value = 'Searching...';
		else
			tempobj.value = 'Find Address';
		tempobj.disabled = status;
	}
}
function clearform(){
	var theform = document.contactDetails;
	theform.organisation.value="";
	theform.address1.value="";
	theform.address2.value="";
	theform.address3.value="";
	theform.address4.value="";
	theform.town.value="";
	theform.county.value="";
	theform.postcode.value="";
}
</script>

Note: The clearform function above references the address fields in your form and may need to be updated to reference your address form with the correct input names.

Back to Top