I'm struggling to find any up to date relevant information on how to achieve this effect in google maps. I was hoping someone knows more than me on the subject and could point me in the correct direction..
The problem:
- I need to plot X amount of pins on a map via a postcode.
- The second step is to enter my own postcode and product a list of the closest 5 postcodes plotted in step one.
I'm struggling to find any up to date relevant information on how to achieve this effect in google maps. I was hoping someone knows more than me on the subject and could point me in the correct direction..
The problem:
- I need to plot X amount of pins on a map via a postcode.
- The second step is to enter my own postcode and product a list of the closest 5 postcodes plotted in step one.
1 Answer
Reset to default 19This code will tell you the single closest zipcode to the one you enter in the box. I'm sure from here you can adapt it to give the top 5 results.
I was able to adapt the Geocoding sample code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Geocoding Simple</title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var map;
var markers = [];
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(40.768505,-111.853244);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
addPostCode('84101');
addPostCode('84102');
addPostCode('84103');
addPostCode('84104');
addPostCode('84105');
}
function addPostCode(zip) {
geocoder.geocode( { 'address': zip}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
name: zip
});
markers.push(marker);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function checkZip(zip)
{
var distance = Number.MAX_VALUE;
var index = 0;
geocoder.geocode( { 'address': zip}, function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
for(ix=0; ix< markers.length; ix++)
{
var tmp = getDistance(results[0].geometry.location, markers[ix].position);
if (tmp < distance)
{
distance = tmp;
index = ix;
}
}
alert('nearest zipcode is :' + markers[index].name);
}
});
}
function getDistance(latlng1, latlng2)
{
var R = 6371; // Radius of the earth in km
var dLat = (latlng2.lat()-latlng1.lat()) * Math.PI / 180; // Javascript functions in radians
var dLon = (latlng2.lng()-latlng1.lng()) * Math.PI / 180;
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(latlng1.lat() * Math.PI / 180) * Math.cos(latlng2.lat() * Math.PI / 180) *
Math.sin(dLon/2) * Math.sin(dLon/2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
d = d * 0.621371192; // convert to miles
return d;
}
</script>
</head>
<body onload="initialize()">
<div>
<input id="address" type="textbox" value="">
<input type="button" value="Geocode" onclick="checkZip(getElementById('address').value)">
</div>
<div id="map_canvas" style="height:90%"></div>
</body>
</html>