Hi All

 

Im just wondering if its possible to search via postcode and show results of nearest places using php?

 

And if there are any tutorials...

 

Example is below:

 

http://www.dermasalve.com/index.php/where-to-buy

 

Thanks Ben

Postcode Anywhere have a store locator webservice, which can be as simple as a javascript popup, or something that's fully integrated into your site.

 

Can't speak for it's quality as my last store locator was made from scratch, but I can highly recommend Postcode Anywhere on the strength of their other services.

 

It's not too hard to roll your own, but having seen this I don't know if I'll bother next time

You could always use the multimap API aswell.

Thanks I can only get some parts of the Postcode Anywhere site to load??? Looks like you will have to pay to use it? Im looking for a free version if possible.

 

Reading up more you can use google maps and as Jmz said multimap, I cant seem to find any tutorials on how to set your locations and how to setup a postcode seach facility?

 

Not really sure what this is called so im finding it hard to find for tutorials?

Royal Mail control the postcode data and they make the most of that opportunity - if you can't pay for postcodes then your choices are limited.

 

Need a bit more info - what are you planning to use this for? Would you be happy to have a Google map on your site? How important is accuracy, and would the free data at Jibble.org suffice?

 

Edit: Just checked Jibble.org's download link, it's broken. Stumbled across Easypeasy.com's free postcode data, which even has a SQL file, and a list of towns with coordinates! Check out the link, they have a brief mention of one method of distance-finding between two coordinates. If you fancy chucking him some money, you can download some code that may well help.

 

Depends how much of a rush you're in.

Thanks Nathan thats a really good find!

 

Have downloaded easypeasys postcode data... but not sure how I would use these postcodes, on a UK map? Would I have to use google maps?

 

Basicly I have say 5 places in the UK. I want to be able to type in a postcode in a search box, press find, then the closest place is displayed depending on your location? (Would be cool to have a map of the UK shown too!)

 

Thanks

Yeah, I'd recommend Google maps for most things like this. You'll have a zoomable, pannable map on your site, and it's not as tricky as you may think.

 

First thing then, we need to get a map with five markers. Check out Richard Stephenson's Map Maker - click somewhere on the map, fill out the Marker Name and the Popup Content, then click Add Marker. Do this for each of your five locations, then use the Get Javascript button to have a basic page generated. Copy and paste this into a new file.

 

You'll notice this line near the top of the file:

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAARKYM[...]" type="text/javascript"></script>

 

The important thing here is the "key=ABQIAAAARKYM..." part. Your site will need it's own API key - visit the Google Maps API sign-up page, and enter the domain name of your site without the "www". You'll be given a key to copy into the Map Maker page from earlier - luckily you don't have to make a note of this key, as you can repeat the API sign-up at any time.

 

Alright then - upload this new page to your server, and you should have a fully working Google map!

 

Next stop: Postcode search. Let us know where you've uploaded your map, as it'll make for a smoother ride

Thanks Nathan, again great sites!

 

Heres what Ive done so far...

 

http://www.ben-smith.net/postcode/postcodesearch.html

 

That was pretty painless! Thanks!

hmm, didn't work for me... but I am in North Wales so somewhat remote (only 200,000 within 50 miles of me...)

Its not functionial yet, thats just ther first part now just need to link the button to calculate nearest location.

I love a good Google map.

 

Okay, now we've got to delve into the custom code, but I promise it won't be much more than a copy and paste. After this, you'll have something that highlights the closest marker - anything beyond that will depend on your design, and how far you want to take it. For example, you could show directions (text and graphical) from the entered postcode to the closest marker, or you could change the icons on the map to anything of your choosing. It's a versatile thing.

 

To get started, Google needs to realise this is a UK-search. Their API has a bug at the moment, so to do this you'll need to change the script tag at the top of the file from src="http://maps.google.com/ to src="http://maps.google.co.uk/.

 

Now even though the map has markers, our code has no way of knowing where they are. At the beginning of the embedded script, we'll add a new line, "var markers = new Array();" - the top of the script will look like this:

 

var map;
var icon0;
var newpoints = new Array();
var markers = new Array();

 

Scroll down a bit, to "function addPoints()". To store the location of the marker, we'll add a line to the for loop - "markers.push(marker);". It'll look like this:

 

	for(var i = 0; i < newpoints.length; i++) {
	var point = new GPoint(newpoints[i][1],newpoints[i][0]);
	var popuphtml = newpoints[i][4];
	var marker = createMarker(point,newpoints[i][2],popuphtml);
	markers.push(marker);
	map.addOverlay(marker);
}

 

Okay, time for the postcode search - we have a chunk of custom code to paste in. You'll see this bit of the script:

 

function createMarker(point, icon, popuphtml) {
...omitted...
}

 

Below this, paste the following:

 

function closestMarkerSearch(map, markers, zoom, address) {
if (markers.length == 0) {
	throw new Exception('No markers given');
}
new GClientGeocoder().getLatLng(address, function(latLng) {
	if (latLng === null) {
		alert('Please enter a postcode');
	} else {
		var distance;
		var closestDistance = null;
		var closestMarker = null;
		for (var i = 0; i < markers.length; i++) {
			distance = latLng.distanceFrom(markers[i].getLatLng());
			if (closestDistance === null || distance < closestDistance) {
				closestDistance = distance;
				closestMarker = markers[i];
			}
		}
		map.setZoom(zoom);
		map.setCenter(latLng);
		GEvent.trigger(closestMarker, 'click');
	}
});
}

 

Almost done, just need to hook up your form. Add id="PostCode" to your <input type="text"> tag, and add the following to your <form> tag:

 

onsubmit="closestMarkerSearch(map, markers, 10, document.getElementById('PostCode').value); return false"

 

Should be everything you need for a basic postcode search - tell me if I've not been clear, or if I've managed to miss something out. I'm sure you'll want to build on this, but I've more of a technical head than a design head, so do let us know if you have any ideas for improvement.

Thanks alot Nathan!

 

All this sounds great, cant wait!

 

For example, you could show directions (text and graphical) from the entered postcode to the closest marker, or you could change the icons on the map to anything of your choosing. It's a versatile thing.

 

 

I think I might have done something wrong as the submit button isnt working thou?

 

Could is be the form or submit name or doesnt that matter?

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Simple Google map</title> 
<!-- //Change the following line to use your own key available from http://www.google.com/apis/maps/signup.html -->
<script src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAz4E9tw9l3jf-
-K9zANDWyBSLxbwJ140BY2A-
-iNCbblYSNKjQhSvRg_m-Pn4-74Ehor-XpItwUhL9g" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// http://mapmaker.donkeymagic.co.uk
var map;
var icon0;
var newpoints = new Array();
var markers = new Array();


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
	window.onload = func
} else { 
	window.onload = function() {
		oldonload();
		func();
	}
}
}

addLoadEvent(loadMap);
addLoadEvent(addPoints);

function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 54.41892996865827, -7.119140625), 5);
map.setMapType(G_MAP_TYPE);

icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}

function addPoints() {

newpoints[0] = new Array(51.34498201394316, -2.98004150390625, icon0, 'Place 1', 'Address One'); 
newpoints[1] = new Array(53.77468884583577, -1.9775390625, icon0, 'Place2', 'Address2'); 
newpoints[2] = new Array(56.68037378950136, -4.15283203125, icon0, 'Place3', 'Address 3'); 
newpoints[3] = new Array(54.41892996865827, -6.9873046875, icon0, 'Place4', 'Address4'); 
newpoints[4] = new Array(52.562995039558004, 0.8349609375, icon0, 'Place5', 'Address5'); 

for(var i = 0; i < newpoints.length; i++) {
	var point = new GPoint(newpoints[i][1],newpoints[i][0]);
	var popuphtml = newpoints[i][4];
	var marker = createMarker(point,newpoints[i][2],popuphtml);
	markers.push(marker);
	map.addOverlay(marker);
}
}

function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(popuphtml);
});
return marker;
}

function closestMarkerSearch(map, markers, zoom, address) {
if (markers.length == 0) {
	throw new Exception('No markers given');
}
new GClientGeocoder().getLatLng(address, function(latLng) {
	if (latLng === null) {
		alert('Please enter a postcode');
	} else {
		var distance;
		var closestDistance = null;
		var closestMarker = null;
		for (var i = 0; i < markers.length; i++) {
			distance = latLng.distanceFrom(markers[i].getLatLng());
			if (closestDistance === null || distance < closestDistance) {
				closestDistance = distance;
				closestMarker = markers[i];
			}
		}
		map.setZoom(zoom);
		map.setCenter(latLng);
		GEvent.trigger(closestMarker, 'click');
	}
});
}
//]]>
</script>

<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body>
<div id="map" style="width:500px;height:450px"></div>

<form name="SearchForm" onsubmit="closestMarkerSearch(map, 
markers, 10, document.getElementById('PostCode').value); return false">
<p>Enter UK Postcode:</p><input size="20" type="text" name="PostCode" id="PostCode">
<input type="button" name="Search" value="Search"/>
</form>

</body>
</html>

You're almost there - just need to change from <input type="button"> to <input type="submit">

 

Noticed a mistake in my code - if you look at around line 100 of your page, you'll see map.setCenter(latLng);. Instead, that should be map.setCenter(closestMarker.latLng);

Thanks Amazing Nathan!

 

How did you learn that as I cant find any tutorials on the net!

 

How would I do...

 

For example, you could show directions (text and graphical) from the entered postcode to the closest marker, or you could change the icons on the map to anything of your choosing. It's a versatile thing.

 

What else is possible with google maps, this is really cool!

Just wondering how I would add directions to my postcode search facility. Google have an example...

 

http://www.google.com/apis/maps/documentat...ons-simple.html

 

but now sure how to work this into my code?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Simple Google map</title> 
<!-- //Change the following line to use your own key available from http://www.google.com/apis/maps/signup.html -->
<script src="http://maps.google.co.uk/maps?file=api&v=2&key=ABQIAAAAz4E9tw9l3jf-
-K9zANDWyBSLxbwJ140BY2A--iNCbblYSNKjQhSvRg_m-Pn4-74Ehor-XpItwUhL9g" 
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// Google Map Maker script v.1.1
// (c) 2006 Richard Stephenson http://www.donkeymagic.co.uk
// Email: donkeymagic@gmail.com
// http://mapmaker.donkeymagic.co.uk
var map;
var icon0;
var newpoints = new Array();
var markers = new Array();


function addLoadEvent(func) { 
var oldonload = window.onload; 
if (typeof window.onload != 'function'){ 
	window.onload = func
} else { 
	window.onload = function() {
		oldonload();
		func();
	}
}
}

addLoadEvent(loadMap);
addLoadEvent(addPoints);

function loadMap() {
map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 54.41892996865827, -7.119140625), 5);
map.setMapType(G_MAP_TYPE);

icon0 = new GIcon();
icon0.image = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
icon0.iconSize = new GSize(20, 34);
icon0.shadowSize = new GSize(37, 34);
icon0.iconAnchor = new GPoint(9, 34);
icon0.infoWindowAnchor = new GPoint(9, 2);
icon0.infoShadowAnchor = new GPoint(18, 25);
}

function addPoints() {

newpoints[0] = new Array(51.34498201394316, -2.98004150390625, icon0, 'Place 1', 'Address One'); 
newpoints[1] = new Array(53.77468884583577, -1.9775390625, icon0, 'Place2', 'Address2'); 
newpoints[2] = new Array(56.68037378950136, -4.15283203125, icon0, 'Place3', 'Address 3'); 
newpoints[3] = new Array(54.41892996865827, -6.9873046875, icon0, 'Place4', 'Address4'); 
newpoints[4] = new Array(52.562995039558004, 0.8349609375, icon0, 'Place5', 'Address5'); 

for(var i = 0; i < newpoints.length; i++) {
	var point = new GPoint(newpoints[i][1],newpoints[i][0]);
	var popuphtml = newpoints[i][4];
	var marker = createMarker(point,newpoints[i][2],popuphtml);
	markers.push(marker);
	map.addOverlay(marker);
}
}

function createMarker(point, icon, popuphtml) {
var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";
var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function() {
	marker.openInfoWindowHtml(popuphtml);
});
return marker;
}

function closestMarkerSearch(map, markers, zoom, address) {
if (markers.length == 0) {
	throw new Exception('No markers given');
}
new GClientGeocoder().getLatLng(address, function(latLng) {
	if (latLng === null) {
		alert('Please enter a postcode');
	} else {
		var distance;
		var closestDistance = null;
		var closestMarker = null;
		for (var i = 0; i < markers.length; i++) {
			distance = latLng.distanceFrom(markers[i].getLatLng());
			if (closestDistance === null || distance < closestDistance) {
				closestDistance = distance;
				closestMarker = markers[i];
			}
		}
		map.setZoom(zoom);
		map.setCenter(closestMarker.latLng);
		GEvent.trigger(closestMarker, 'click');
	}
});
}
//]]>
</script>

<style type="text/css">
div#popup {
background:#EFEFEF;
border:1px solid #999999;
margin:0px;
padding:7px;
width:270px;
}
</style>
</head>
<body>
<div id="map" style="width:500px;height:450px"></div>

<form name="SearchForm" onsubmit="closestMarkerSearch(map, 
markers, 10, document.getElementById('PostCode').value); return false">
<p>Enter UK Postcode:</p><input size="20" type="text" name="PostCode" id="PostCode">
<input type="submit" name="Search" value="Search"/>
</form>

</body>
</html>

Here you may find software connecting with zip postal codes like: search by a zip postal code (or within a particular radius), distance calculation in miles or kilometers between zip postal codes, displaying a route on a map between two zip postal codes, and much more ZipPostalCodes.com

Hi Nathan,

 

I have been reading this post and have gotten as far as when you talk about a form. Forgive me but I am a beginner and dont quite understand from here.

 

I have the map uploaded onto the site (and it works) and have made the changes to the code but am lost regarding the form.

 

Can you please help

 

Pete

Hey anyone i hope someone call help as this is killing me.

 

Im trying to impliment a google maps api store loctor:

 

http://www.coombshampshires.co.uk/working.html

 

Works great apart from the post code search does something strange with a few post codes.

 

For example if i search for LE2 1YA (fleetwood road, leicester) it returns the local store as an LE12 post code, if i put the address into the search box (fleetwood road, leicester) i returns the right store.

 

If i just do a search though google maps for LE2 1YA it find it in the right location... ?

 

So i can only assume somewhere its mixing up the LE2 1YA for LE12

 

Can anyone shead some light on this its a real pain in the behind...

 

Regards

 

Matt.