I've been trying to figure this out for so long that I'm sure it's staring me in the face.
I'm using jquery to auto complete an address being entered by a user with the following code:
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source : function(request, response) {
geocoder.geocode({'address' : request.term },
function(results, status) {
response($.map(results, function(item) {
return {
label : item.formatted_address,
value : item.formatted_address,
latitude : item.geometry.location.lat(),
longitude : item.geometry.location.lng(),
streetNo : item.address_components[0].long_name,
streetName : item.address_components[1].long_name,
town : item.address_components[2].long_name,
province : item.address_components[4].long_name,
}
}));
})
}
I need to extract the address components specfically i.e. postal code. Right now I'm using numbers but depending on the address inputted, the fields may or may not be correct.
I pretty much have the same question this guy did:
Google Maps Geocoder: Return postal_code
The answer to that question is appropriate but the issue I"m having his when I try to loop, or do anything other than extract the info the way it's already done here the script fails.
Based on the way the jquery autocomplete does it's google query, can I assign the "results" to a variable and then parse it that way for correct type names?
Everything I've tried so far has failed, usually resulting in the script not running.
I'm getting desperate here, hopefully my question is coherent! :P
The following code works for me to extract the postal code into postal_code:
$(function() {
var geocoder = new google.maps.Geocoder();
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source : function(request, response) {
geocoder.geocode({'address' : request.term },
function(results, status) {
response($.map(results, function(item) {
var postalCode = "";
if (item.address_components) {
for (var i in item.address_components) {
if (typeof(item.address_components[i]) === "object" && item.address_components[i].types[0] == "postal_code") {
postalCode = item.address_components[i].long_name;
}
}
}
return {
label : item.formatted_address,
value : item.formatted_address,
latitude : item.geometry.location.lat(),
longitude : item.geometry.location.lng(),
streetNo : item.address_components[0].long_name,
streetName : item.address_components[1].long_name,
town : item.address_components[2].long_name,
province : item.address_components[4].long_name,
postal_code : postalCode
}
}));
})
}
});
});
See this jsfiddle: http://jsfiddle.net/mccannf/uzvvq/3/
Okay folks so I managed to figure out. Posting the answer here in case anyone else ever gets stuck on this thing.
The way it has been coded allows the programmer to extract exactly what type they are looking for by using a function written in another answer on stackoverflow:
More efficient way to extract address components
I used user: Johann's answer but I'll include my code just to have a bigger overall "scope" for other 'hobby' programmers like me who may have a hard time "bridging the gap".
$(function() {
$("#address").autocomplete({
//This bit uses the geocoder to fetch address values
source : function(request, response) {
geocoder.geocode({
'address' : request.term
},function(results, status) {
//Here we take the response and manipulate the map
response($.map(results, function(item) {
//Function here to be called by the variables we want, essentially it loops through the array
//of address_components that come back from the geolocate, and loops until it finds the 'type'
//Entered in the "return" section below
function extractFromAdress(components, type){
for (var i=0; i<components.length; i++)
for (var j=0; j<components[i].types.length; j++)
if (components[i].types[j]==type) return components[i].long_name;
return "";
}
//Returns the variables, left of the ':' to the script
//Code right of the ':' is whatever we want to assign to the variable
return {
label : item.formatted_address,
value : item.formatted_address,
//Lat and Long from the geo-locate
latitude : item.geometry.location.lat(),
longitude : item.geometry.location.lng(),
//Typical street address values a user would input, and what a typical program would need.
streetNo : extractFromAdress(item.address_components, "street_number"),
streetName : extractFromAdress(item.address_components, "route"),
town : extractFromAdress(item.address_components, "administrative_area_level_3"),
province : extractFromAdress(item.address_components, "administrative_area_level_1"),
postal : extractFromAdress(item.address_components, "postal_code"),
}
}));
})
}
For a reference of which types are available from the addresses, check this link:
https://developers.google.com/maps/documentation/geocoding/index#JSON
Cheers everyone.