Question

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! 😛

Answer 1

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.