Get a address_components

问题:

I'm using google places API with geocoding. I have a problem with address components type.

I want to get information about address which user typed in autocomplete in this format:
Street number/ street / City/ Province/ Country.

If user autocompleted "Street 12, SomeCity, SomeProvince, SomeCountry", I want to return in alert all of this information. But when user type only "someProvince, SomeCountry", I want to have only province and country address type.

Here is my code:

google.maps.event.addListener(autocomplete, 'place_changed', function () {
    var place = autocomplete.getPlace();
    alert('0: ' + place.address_components[0].long_name);
    alert('1: ' + place.address_components[1].long_name);
    alert('2: ' + place.address_components[2].long_name);
    alert('3: ' + place.address_components[3].long_name);
    alert('4: ' + place.address_components[4].long_name);
    alert('5: ' + place.address_components[5].long_name);
    alert('6: ' + place.address_components[6].long_name);
    alert('7: ' + place.address_components[7].long_name);
)};

Problem is that when user autocomplete full address, it show properly all of this alerts. But when autocomplete only part of information - only country - it will show 7 times what country is typed.

http://gmaps-samples-v3.googlecode.com/svn/trunk/places/autocomplete-addressform.html

I want to have, that when street and city is not given, it will show alert ("street is null" etc). How to do it?

回答1:

Made this function for a project. It parses

• street
• number
• country
• zip
• city

from a google georesponse

function parseGoogleResponse(components) {
    _.each(components, function(component) {
      _.each(component.types, function(type) {
        if (type === 'route') {
          $("input[name=street]").val(component.long_name)
        }
        if (type === 'street_number') {
          $("input[name=nr]").val(component.long_name)
        }
        if (type === 'locality') {
          $("input[name=city]").val(component.long_name)
        }
        if (type === 'country') {
          $("input[name=country]").val(component.long_name)
        }
        if (type === 'postal_code') {
          $("input[name=zip]").val(component.long_name)
        }
      })
    })
  }

回答2:

As per the demo, you need to check each of the returned address components to see if a street / city has been returned:

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var place = autocomplete.getPlace();
    var components = place.address_components;
    var street = null;
    for (var i = 0, component; component = components[i]; i++) {
        console.log(component);
        if (component.types[0] == 'route') {
            street = component['long_name'];
        }
    }
    alert('Street: ' + street);
});

回答3:

Address Types and Address Component Types

Use the types and map them to your address fields. Keep in mind that cities, counties, states etc. can have different meanings depending on their context. For example, North Hollywood comes up with type neighborhood since it is located in Los Angeles('locality').

function placeToAddress(place){
        var address = {};
        place.address_components.forEach(function(c) {
            switch(c.types[0]){
                case 'street_number':
                    address.StreetNumber = c;
                    break;
                case 'route':
                    address.StreetName = c;
                    break;
                case 'neighborhood': case 'locality':    // North Hollywood or Los Angeles?
                    address.City = c;
                    break;
                case 'administrative_area_level_1':     //  Note some countries don't have states
                    address.State = c;
                    break;
                case 'postal_code':
                    address.Zip = c;
                    break;
                case 'country':
                    address.Country = c;
                    break;
                /*
                *   . . . 
                */
            }
        });

        return address;
    }

回答4:

Here is a simple suggestion:

function parseGoogleResponse (components) {
  var newComponents = {}, type;
  $.each(components, function(i, component) {
    type = component.types[0];
    newComponents[type] = {
      long_name: component.long_name,
      short_name: component.short_name
    }
  });
  return newComponents;
}

And the usage will be:

var components = parseGoogleResponse( places[0].address_components );

回答5:

Made this function for AngularJS:

function getAddressComponentByPlace(place) {
    var components;

    components = {};

    angular.forEach(place.address_components, function(address_component) {
        angular.forEach(address_component.types, function(type) {
            components[type] = address_component.long_name;
        });
    });

    return components;
}

The result looks like this:

administrative_area_level_1: "Berlin"
country: "Deutschland"
locality: "Berlin"
political: "Deutschland"
postal_code: "10719"
route: "Kurfürstendamm"
street_number: "1"
sublocality: "Bezirk Charlottenburg-Wilmersdorf"
sublocality_level_1: "Bezirk Charlottenburg-Wilmersdorf"

回答6:

I wrote this function in pure Javascript to get the corresponding type from a google.maps.GeocoderAddressComponent object

//gets "street_number", "route", "locality", "country", "postal_code"
function getAddressComponents(components, type) {    

    for (var key in components) {
        if (components.hasOwnProperty(key)) {            

            if (type == components[key].types[0]) {
                return components[key].long_name;
            }  
        }        
    }
}