Post Code Search Using Google API

Published: 2009-01-26

Recently I've had a requirement to map locations based on radius from a user defined point, basically the user would enter a postcode/location and items within a 10 mile radius are found from the database.

This solution uses the Google Maps API and assumes you have the longitude and latitude of each item in the database (if you don't have this info you can modify the js below to get them). It also makes the assumption that you have jQuery installed.

This write up won't go into detail but the overview and code snippets should be enough to working with.

The html: a very basic form, the user will enter their search term into a text input named 'search'. There are 2 hidden fields, longitude/latitude that will pass the script for processing. The Google js scripts are also included - add you own key to the html.

<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=MY-KEY'
    type='text/javascript'></script>
<script src='http://www.google.com/uds/api?file=uds.js&amp;v=1.0&amp;key=MY-KEY'
    type='text/javascript'></script>

<form action="/search" method="post">
	<fieldset>
		<legend>Search for a near by property</legend>
		<div class="form_option">
	          <label for="search">Enter postcode, town or region</label>
		  <input type="text" name="search" id="search" />
		  <input type="hidden" name="longitude" id="longitude" />
		  <input type="hidden" name="latitude" id="latitude" />
		</div>
		<input type="submit" class="button-search" value="" />
	</fieldset>
</form>

The js: every time a user types into the search input a request is fired off to the Google API requesting a search, if a valid result is returned the hidden longitude/latitude fields in the html are populated

$(document).ready(function(){ 
	$('#search').keyup(function(){
		var localSearch = new GlocalSearch();
		localSearch.setSearchCompleteCallback(null, function(){
			if(localSearch.results[0]){	
			  $('#latitude').attr('value',localSearch.results[0].lat);
			  $('#longitude').attr('value',localSearch.results[0].lng);
			  return true;
			}else {
			  $('#latitude').attr('value','');
			  $('#longitude').attr('value','');
			  return false;
			}
		});
		localSearch.execute(jQuery.trim($(this).val()) + ", UK");
	});
});

(I've used the PHPWAX framework but you should be able to make out what's going on and apply to your own practices) The php: we take the longitude/latitude from the request, do some maths to work out the 10 mile limits and then search the database for entires within these limits.

$longitude = Request::post('longitude');
$latitude = Request::post('latitude');

$radius = 10;

// Latitude calculation
$limit = (1 / 69.1703234283616) * $radius;
$latitude_min = $latitude - $limit;
$latitude_max = $latitude + $limit;

// Longitude calculation
$limit = (1 / (69.1703234283616 * cos($userLat * (pi/180)))) * $radius;
$longitude_min = $longitude - $limit;
$longitude_max = $longitude + $limit;

$item = new Item;
$items = $item->filter("longitude BETWEEN '{$longitude_min}' AND '{$longitude_max}' 
          AND latitude BETWEEN {$latitude_min} AND {$latitude_max}")->all();

Magic. Google is awesome.

More from this section