get city from geocoder results?

Question

Having problems getting the different arrays content from geocoder results.

item.formatted_address works but not item.address_components.locality?

geocoder.geocode( {'address': request.term }, function(results, status) {

        response($.map(results, function(item) {

        alert(item.formatted_address+" "+item.address_components.locality)
    }            
});

// the array returned is;

 "results" : [
      {
         "address_components" : [
            {
               "long_name" : "London",
               "short_name" : "London",
               "types" : [ "locality", "political" ]
            } ],
          "formatted_address" : "Westminster, London, UK" // rest of array...

any help appreciated!

Dc

score 60 · Accepted Answer · edited Sep 19 '13 at 19:28

Got this working in the end using:

var arrAddress = item.address_components;
var itemRoute='';
var itemLocality='';
var itemCountry='';
var itemPc='';
var itemSnumber='';

// iterate through address_component array
$.each(arrAddress, function (i, address_component) {
    console.log('address_component:'+i);

    if (address_component.types[0] == "route"){
        console.log(i+": route:"+address_component.long_name);
        itemRoute = address_component.long_name;
    }

    if (address_component.types[0] == "locality"){
        console.log("town:"+address_component.long_name);
        itemLocality = address_component.long_name;
    }

    if (address_component.types[0] == "country"){ 
        console.log("country:"+address_component.long_name); 
        itemCountry = address_component.long_name;
    }

    if (address_component.types[0] == "postal_code_prefix"){ 
        console.log("pc:"+address_component.long_name);  
        itemPc = address_component.long_name;
    }

    if (address_component.types[0] == "street_number"){ 
        console.log("street_number:"+address_component.long_name);  
        itemSnumber = address_component.long_name;
    }
    //return false; // break the loop   
});

Works nicely but would be more elegant and less code as a 'switch' statement. — Grant, Apr 24 '14 at 17:50
Do not expect this to work reliable, Google's geocode is flawed in many ways. "locality" is not always available, sometimes the city is actually in the state (level_1) field. Especially when the return type is ROOFTOP the Google Geocode results are bad. In foreign countries they suddenly switch format. You can trust "APPROXIMATE" results a lot more than "ROOFTOP" — John, Dec 24 '18 at 06:01
Correct. Doesn't work reliably. Google notes that there's no consistency in the components you get in your response. Also that it might change over time. https://developers.google.com/maps/documentation/places/web-service/details under "Place Details Results" — bjornl, Mar 27 '21 at 07:51

Ruslan · Answer 2 · 2011-06-16T15:04:54.687

15

tried a couple of different requests:

MK107BX

Cleveland Park Crescent, UK

like you say, array size returned is inconsistent but the Town for both results appears to be in the address_component item with type of [ "locality", "political" ]. Perhaps you could use that as an indicator?

EDIT: get the locality object using jQuery, add this to your response function:

var arrAddress = item.results[0].address_components;
// iterate through address_component array
$.each(arrAddress, function (i, address_component) {
    if (address_component.types[0] == "locality") // locality type
        console.log(address_component.long_name); // here's your town name
        return false; // break the loop
    });

edited Jun 16 '11 at 15:04

answered Jun 15 '11 at 15:22

Ruslan

9,927
15
55
89

1

afraid that doesn't work. Not sure how it would as there's no variables/arrays for 'addresses' ? – v3nt Jun 15 '11 at 15:43
sorry, I was on about different google maps api request. Edited. – Ruslan Jun 16 '11 at 08:17
no worries! any idea how i could get the locality though? I just get undefined in my attempts ;-/ If item.formatted_address works am i wrong in thinking this should too - item.address_components.locality ? – v3nt Jun 16 '11 at 09:24
no, because formatted_address is a string but address_components is an array. I'll add the code on how to look through it. – Ruslan Jun 16 '11 at 09:30
1

first line might be `var arrAddress = item.address_components;` in your case. And your code doesn't work because address_components is an array. – Ruslan Jun 16 '11 at 15:15
Works like a charme. Using '.short_name' I finally receive the Cityname without trailing ', Country'. Thanks! – kosemuckel Dec 08 '15 at 19:15

score 11 · Answer 3 · answered Dec 03 '12 at 08:59

I had to create a program that would fill in the latitude, longitude, city, county, and state fields in a user form when the user clicks on a location on the map. The page can be found at http://krcproject.groups.et.byu.net and is a user form to allow the public to contribute to a database. I don't claim to be an expert, but it works great.

<script type="text/javascript">
  function initialize() 
  {
    //set initial settings for the map here
    var mapOptions = 
    {
      //set center of map as center for the contiguous US
      center: new google.maps.LatLng(39.828, -98.5795),
      zoom: 4,
      mapTypeId: google.maps.MapTypeId.HYBRID
    };

    //load the map
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);

    //This runs when the user clicks on the map
    google.maps.event.addListener(map, 'click', function(event)
    {
      //initialize geocoder
      var geocoder = new google.maps.Geocoder()

      //load coordinates into the user form
      main_form.latitude.value = event.latLng.lat();
      main_form.longitude.value = event.latLng.lng();

      //prepare latitude and longitude
      var latlng = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());

      //get address info such as city and state from lat and long
      geocoder.geocode({'latLng': latlng}, function(results, status) 
      {
        if (status == google.maps.GeocoderStatus.OK) 
        {
          //break down the three dimensional array into simpler arrays
          for (i = 0 ; i < results.length ; ++i)
          {
            var super_var1 = results[i].address_components;
            for (j = 0 ; j < super_var1.length ; ++j)
            {
              var super_var2 = super_var1[j].types;
              for (k = 0 ; k < super_var2.length ; ++k)
              {
                //find city
                if (super_var2[k] == "locality")
                {
                  //put the city name in the form
                  main_form.city.value = super_var1[j].long_name;
                }
                //find county
                if (super_var2[k] == "administrative_area_level_2")
                {
                  //put the county name in the form
                  main_form.county.value = super_var1[j].long_name;
                }
                //find State
                if (super_var2[k] == "administrative_area_level_1")
                {
                  //put the state abbreviation in the form
                  main_form.state.value = super_var1[j].short_name;
                }
              }
            }
          }
        }
      });
    });
  }
</script>

I love this, thank you, the only thing I would suggest is maybe a check/break for when a component has been found. — luke_mclachlan, Mar 30 '22 at 10:06

score 7 · Answer 4 · answered Apr 08 '13 at 15:13

I am assuming you want to get the city and the state / province:

var map_center = map.getCenter();
reverseGeocode(map_center);


function reverseGeocode(latlng){
  geocoder.geocode({'latLng': latlng}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
            var level_1;
            var level_2;
            for (var x = 0, length_1 = results.length; x < length_1; x++){
              for (var y = 0, length_2 = results[x].address_components.length; y < length_2; y++){
                  var type = results[x].address_components[y].types[0];
                    if ( type === "administrative_area_level_1") {
                      level_1 = results[x].address_components[y].long_name;
                      if (level_2) break;
                    } else if (type === "locality"){
                      level_2 = results[x].address_components[y].long_name;
                      if (level_1) break;
                    }
                }
            }
            updateAddress(level_2, level_1);
       } 
  });
}

function updateAddress(city, prov){
   // do what you want with the address here
}

Don't try to return the results as you will find that they are undefined - a result of an asynchronous service. You must call a function, such as updateAddress();

you need to break out of every loop, check your console, however the code works great so many thanks! — luke_mclachlan, Mar 30 '22 at 10:26

Jorge Luis Monroy · Answer 5 · 2020-05-17T17:31:37.987

I created this function to get the main info of geocoder results:

const getDataFromGeoCoderResult = (geoCoderResponse) => {
  const geoCoderResponseHead = geoCoderResponse[0];
  const geoCoderData = geoCoderResponseHead.address_components;
  const isEmptyData = !geoCoderResponseHead || !geoCoderData;

  if (isEmptyData) return {};

  return geoCoderData.reduce((acc, { types, long_name: value }) => {
    const type = types[0];

    switch (type) {
      case 'route':
        return { ...acc, route: value };
      case 'locality':
        return { ...acc, locality: value };
      case 'country':
        return { ...acc, country: value };
      case 'postal_code_prefix':
        return { ...acc, postalCodePrefix: value };
      case 'street_number':
        return { ...acc, streetNumber: value };
      default:
        return acc;
    }
  }, {});
};

So, you can use it like this:

const geoCoderResponse = await geocodeByAddress(value);
const geoCoderData = getDataFromGeoCoderResult(geoCoderResponse);

let's say that you are going search Santiago Bernabéu Stadium, so, the result will be:

{
  country: 'Spain',
  locality: 'Madrid',
  route: 'Avenida de Concha Espina',
  streetNumber: '1',
}

score 4 · Answer 6 · answered Jul 22 '18 at 14:46

This worked for me:

const localityObject = body.results[0].address_components.filter((obj) => {
  return obj.types.includes('locality');
})[0];
const city = localityObject.long_name;

or in one go:

const city = body.results[0].address_components.filter((obj) => {
  return obj.types.includes('locality');
)[0].long_name;

I'm doing this in Node, so this is okay. If you need to support IE you need to use a polyfill for Array.prototype.includes or find another way of doing it.

score 3 · Answer 7 · answered Jan 12 '15 at 08:41

I think it is a real pain that google doesn't provide some sort of functionality to get these. Anyhow I think the best way of finding the right object is:

geocoder.geocode({'address': request.term }, function(results, status){

   response($.map(results, function(item){

      var city = $.grep(item.address_components, function(x){
         return $.inArray('locality', x.types) != -1;
      })[0].short_name;

      alert(city);
   }            
});

score 1 · Answer 8 · answered Feb 13 '14 at 02:42

// Use Google Geocoder to get Lat/Lon for Address
function codeAddress() {
    // Function geocodes address1 in the Edit Panel and fills in lat and lon
    address = document.getElementById("tbAddress").value;
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            loc[0] = results[0].geometry.location.lat();
            loc[1] = results[0].geometry.location.lng();
            document.getElementById("tbLat").value = loc[0];
            document.getElementById("tbLon").value = loc[1];
            var arrAddress = results[0].address_components;
            for (ac = 0; ac < arrAddress.length; ac++) {
                if (arrAddress[ac].types[0] == "street_number") { document.getElementById("tbUnit").value = arrAddress[ac].long_name }
                if (arrAddress[ac].types[0] == "route") { document.getElementById("tbStreet").value = arrAddress[ac].short_name }
                if (arrAddress[ac].types[0] == "locality") { document.getElementById("tbCity").value = arrAddress[ac].long_name }
                if (arrAddress[ac].types[0] == "administrative_area_level_1") { document.getElementById("tbState").value = arrAddress[ac].short_name }
                if (arrAddress[ac].types[0] == "postal_code") { document.getElementById("tbZip").value = arrAddress[ac].long_name }
            }
            document.getElementById("tbAddress").value = results[0].formatted_address;
        }
        document.getElementById("pResult").innerHTML = 'GeoCode Status:' + status;
    })
}

score 1 · Answer 9 · edited Nov 21 '16 at 20:11

1

Returns locality if exist. If not - returns administrative_area_1

city = results[0].address_components.filter(function(addr){
   return (addr.types[0]=='locality')?1:(addr.types[0]=='administrative_area_level_1')?1:0;
});

edited Nov 21 '16 at 20:11

Dmitriy

5,525
12
25
38

answered Nov 21 '16 at 19:38

Eugene Chernyshov

19
1

score 0 · Answer 10 · answered May 26 '14 at 22:38

            //if (arrAddress[ac].types[0] == "street_number") { alert(arrAddress[ac].long_name) } // SOKAK NO
            //if (arrAddress[ac].types[0] == "route") { alert(arrAddress[ac].short_name); } // CADDE
            //if (arrAddress[ac].types[0] == "locality") { alert(arrAddress[ac].long_name) } // İL
            //if (arrAddress[ac].types[0] == "administrative_area_level_1") { alert(arrAddress[ac].short_name) } // İL
            //if (arrAddress[ac].types[0] == "postal_code") { alert(arrAddress[ac].long_name); } // POSTA KODU
            //if (arrAddress[ac].types[0] == "neighborhood") { alert(arrAddress[ac].long_name); } // Mahalle
            //if (arrAddress[ac].types[0] == "sublocality") { alert(arrAddress[ac].long_name); } // İlçe
            //if (arrAddress[ac].types[0] == "country") { alert(arrAddress[ac].long_name); } // Ülke

score 0 · Answer 11 · answered May 04 '15 at 20:33

Here's some code you can use with the lodash js library: (just replace the $scope.x with your own variable name to store the value)

    _.findKey(vObj.address_components, function(component) {

            if (component.types[0] == 'street_number') {
                $scope.eventDetail.location.address = component.short_name
            }

            if (component.types[0] == 'route') {
                $scope.eventDetail.location.address = $scope.eventDetail.location.address + " " + component.short_name;
            }

            if (component.types[0] == 'locality') {
                $scope.eventDetail.location.city = component.long_name;
            }

            if (component.types[0] == 'neighborhood') {
                $scope.eventDetail.location.neighborhood = component.long_name;
            }

        });

score 0 · Answer 12 · answered Mar 17 '16 at 22:46

0

I used a lodash function called find which returns the object that the predicate returns true for. As simple as that!

let city = find(result, (address) => {
  return typeof find(address.types, (a) => { return a === 'locality'; }) === 'string';
});

answered Mar 17 '16 at 22:46

Satya Sampathirao

147
9

score 0 · Answer 13 · answered Jun 03 '20 at 10:54

Well this worked for me if you want to get the city

var city = "";
function getPositionByLatLang(lat, lng) {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({ 'latLng': latlng }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[1]) {
                //formatted address
                city = results[0].plus_code.compound_code;
                city = city.substr(0, city.indexOf(','));
                city = city.split(' ')[1];

                console.log("the name of city is: "+ city);
            }
        } else {
            // alert("Geocoder failed due to: " + status);
        }
    });
}

score -1 · Answer 14 · answered Mar 13 '21 at 14:06

-1

You can get the city without iterate, generally the city is located on the 2nd key of address_components object so the 2nd mean 1:

results[0].address_components[1].long_name

answered Mar 13 '21 at 14:06

phpier

55
4

This is not true. How you get that? – Čamo Aug 18 '22 at 08:42

get city from geocoder results?

14 Answers14

Linked