My question is: How to Get addresses from postalcode as like royalmail find-a-postcode ?
For this i have created a demo page and did lots of R&D but not getting any scussess. YOu can check the demo page and royal mail site and enter postalcode "HA5 1AA"
http://www.gibbs-gillespie.co.uk/zipcodeaddress.html
https://www.royalmail.com/find-a-postcode
Where royal mail return 5 result and google return only one result.
Please give me the solution or some hint
Thanks
Based upon your code and some found aboard the mighty Google Mothership I think this ought to help get you going.
<!doctype html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>Geocode address - find Postcode</title>
<meta charset='utf-8' />
<style type='text/css'>
body {
font-family: Arial;
font-size: 10pt;
}
#map {
height: 100%;
}
html, body {
height: 100vh;
margin: 0;
padding: 0;
}
#latlng {
width: 225px;
}
#container{
display:block;
height:500px;
width:500px;
margin:0 auto;
}
#data{
width:100%;
height:2rem;
padding:1rem;
box-sizing:border-box;
display:block;
}
#txtPlaces{
width:100%;
box-sizing:border-box;
padding:1rem;
margin:0 auto 1rem auto;
}
</style>
<script src='//maps.googleapis.com/maps/api/js?key=AIzaSyDsCn5YSPGtKhk3RiU2svNV5GKEEMJc84I&libraries=places'></script>
<script type='text/javascript'>
(function(){
var map,infowindow,lat,lng,geocoder,data;
var place,address,geometry,marker,content;
function initMap() {
/* default location */
lat=53.971481395939115;
lng=-3.439286750000065;
map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: { lat:lat, lng:lng }
});
marker = new google.maps.Marker({
map: map,
anchorPoint: new google.maps.Point( 0, -32 )
});
content=document.getElementById('content');
geocoder = new google.maps.Geocoder;
infowindow = new google.maps.InfoWindow;
infowindow.setContent( content );
var autocomplete = new google.maps.places.Autocomplete( document.getElementById('txtPlaces') );
autocomplete.bindTo('bounds', map );
marker.setVisible( false );
autocomplete.addListener('place_changed', function() {
infowindow.close();
place = autocomplete.getPlace();
if( !place.geometry ) {
alert( 'Bad foo: '+place.name );
return false;
}
if( place.geometry.viewport ) {
map.fitBounds( place.geometry.viewport );
} else {
map.setCenter( place.geometry.location );
map.setZoom(15);
}
marker.setPosition( place.geometry.location );
marker.setVisible( true );
address = '';
if( place.address_components ) {
address = [
( place.address_components[0] && place.address_components[0].short_name || '' ),
( place.address_components[1] && place.address_components[1].short_name || '' ),
( place.address_components[2] && place.address_components[2].short_name || '' ),
( place.address_components[3] && place.address_components[3].short_name || '' ),
( place.address_components[4] && place.address_components[4].short_name || '' ),
( place.address_components[5] && place.address_components[5].short_name || '' )
].join( ' ' );
}
content.children['place-icon'].src = place.icon;
content.children['place-name'].textContent = place.name;
content.children['place-address'].textContent = address;
infowindow.open( map, marker );
geocodeLatLng( geocoder );
});
}
function geocodeLatLng( geocoder ) {
address=document.getElementById('txtPlaces').value;
data = document.getElementById('data');
geocoder.geocode({ 'address': address }, function( results, status ) {
if ( status === 'OK' ) {
if ( results[0] ) {
geometry=results[0].geometry.location;
latlng=new google.maps.LatLng( geometry.lat(), geometry.lng() );
map.setZoom( 17 );
map.setCenter( latlng );
data.innerHTML=results[0].formatted_address;
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}
document.addEventListener( 'DOMContentLoaded', initMap, false );
})();
</script>
</head>
<body>
<h1>Location:</h1>
<div id='content'>
<img src='' width='16' height='16' id='place-icon'>
<span id='place-name' class='title'></span><br>
<span id='place-address'></span>
</div>
<div id='container'>
<input type='text' id='txtPlaces' placeholder='Enter a location' />
<div id='map'></div>
<span id='data'></span>
</div>
</body>
</html>
To add a postcode finder just like Royal Mail's solution, you'll need to procure a license from a PAF solutions provider. Royal Mail provides a much more accurate and up-to-date address list than Google Places.
In the UK, there are a few suppliers; here's a list: https://www.poweredbypaf.com/using-our-address-data/find-a-ready-made-solution/.
Ideal Postcodes is one supplier that offers postcode lookup + additional datasets. For example, the multiple residence dataset captures sub-premises situated within multiple occupancy buildings which do not have their own publicly available delivery point (e.g., one letterbox, mailing point, etc.). This is why you might see more addresses in Royal Mail's postcode finder than Google's solution.
