Get a address_components - google-maps

Question

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?

Answer 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)
}
})
})
}

Answer 2

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;
}

Answer 3

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);
});

Answer 4

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"
ES6 Version
const parseGoogleAddressComponents = (addressComponents) => {
let components = {};
addressComponents.forEach((addressComponent) => {
addressComponent.types.forEach((type) => {
components[type] = addressComponent.long_name;
});
});
return components;
};

Answer 5

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;
}
}
}
}

Answer 6

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 );

Answer 7

Simple ES6 version:
const addComponents = gPlaceObj?.place?.address_components
And then select each component you want using a filter:
const country = addComponents.filter(x => x?.types?.includes('country'))[0];
Which would give you this console.log(country):
{"long_name": "United States", "short_name": "US", "types": ["country", "political"]}