Search code examples
javascriptgoogle-places-apigoogle-places

Best way to get address components from Google Places API response

I'm implementing Google Places in a form where the user will enter his/her location. The location can be a full address or just a city.

I want to get each individual component of the address the user has provided. What's the best way to get each component i.e. address, city, state, zip code and country.

In the code below, I'm getting the components which appears to be an array. Do I have to loop through it or is there a direct way for me to access each component?

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('location'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var components = place.address_components;


            });
        });
</script>
Solution

  • Looping is probably the simplest. There's no direct way to jump straight to the e.g. the state address component (if there is one present), it's a simple array.

    You could also process the array into something that allows the direct lookups by type:

    var components_by_type = {};
for (var i = 0; i < place.address_components.length; i++) {
  var c = place.address_components[i];
  components_by_type[c.types[0]] = c;
}

console.log(components_by_type['state'].short_name);

    That will get a little more complicated if you want to handle more than the first type in each component, though.