How to get city name using Google Maps API

Question

In London, the city name is in the object with type postal_town, whereas, in Amsterdam it is in the object with type locality and in Tokyo it is in the object with type administrative_area_level_1.

So how should I decide which object to pick in order to extract the city name when it varies city to city?

Currently, I have something which half works:

const checkCity = data.address_components.find((component) =>
    component.types.includes('locality')
);
const checkTown = data.address_components.find((component) =>
    component.types.includes('postal_town')
);

if (checkCity) {
    city = checkCity.long_name
} else if (checkTown) {
    city = checkTown.long_name
}

However, using this code I don't get the correct city name of Tokyo, I get the locality Minato-ku which is a ward in Tokyo.

Result from Tokyo:

address_components: Array(8)
    0: {long_name: "Sotobori Dori", short_name: "都道405号線", types: Array(1)}
    1: {long_name: "1", short_name: "1", types: Array(3)}
    2: {long_name: "2 Chome", short_name: "2 Chome", types: Array(3)}
    3: {long_name: "Motoakasaka", short_name: "Motoakasaka", types: Array(3)}
    4:
        long_name: "Minato-ku"
        short_name: "Minato-ku"
        types: (2) ["locality", "political"]
        __proto__: Object
    5:
        long_name: "Tōkyō-to"
        short_name: "Tōkyō-to"
        types: (2) ["administrative_area_level_1", "political"]

Result from London:

address_components: Array(7)
    0: {long_name: "27-29", short_name: "27-29", types: Array(1)}
    1: {long_name: "King Street", short_name: "King St", types: Array(1)}
    2:
        long_name: "London"
        short_name: "London"
        types: ["postal_town"]
        __proto__: Object
    3:
        long_name: "Greater London"
        short_name: "Greater London"
        types: (2) ["administrative_area_level_2", "political"]
        __proto__: Object
    4: {long_name: "England", short_name: "England", types: Array(2)}
    5: {long_name: "United Kingdom", short_name: "GB", types: Array(2)}
    6: {long_name: "WC2E 8JB", short_name: "WC2E 8JB", types: Array(1)}

Result from Amsterdam:

address_components: Array(8)
    0: {long_name: "9", short_name: "9", types: Array(1)}
    1: {long_name: "Slijkstraat", short_name: "Slijkstraat", types: Array(1)}
    2: {long_name: "Amsterdam-Centrum", short_name: "Amsterdam-Centrum", types: Array(3)}
    3:
        long_name: "Amsterdam"
        short_name: "Amsterdam"
        types: (2) ["locality", "political"]
        __proto__: Object
    4: {long_name: "Amsterdam", short_name: "Amsterdam", types: Array(2)}
    5: {long_name: "Noord-Holland", short_name: "NH", types: Array(2)}
    6: {long_name: "Netherlands", short_name: "NL", types: Array(2)}
    7: {long_name: "1012 CM", short_name: "1012 CM", types: Array(1)}

1) It might be a good idea to mention what API / library / framework you are using 2) We don't know what you searched for to get these results 3) This question has been asked already multiple times and 4) There is quite a lot to read in the [docs](https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingAddressTypes) about address types (assuming you are doing reverse geocoding?) — MrUpsidown, Feb 05 '19 at 00:49
Possible duplicate of https://stackoverflow.com/questions/6797569/get-city-name-using-geolocation — MrUpsidown, Feb 05 '19 at 00:49
Possible duplicate of https://stackoverflow.com/questions/6548504/how-can-i-get-city-name-from-a-latitude-and-longitude-point — MrUpsidown, Feb 05 '19 at 00:50
Possible duplicate of https://stackoverflow.com/questions/27524422/get-definite-city-name-in-google-maps-reverse-geocoding — MrUpsidown, Feb 05 '19 at 00:51

score 3 · Accepted Answer · answered Feb 05 '19 at 11:04

Having faced the problem of trying to find specific items easily in the GeoCoder response I have tended to use the following functions - it has worked fairly well for me but I can imagine there would be situations where it might yield incorrect results.

/*
    calculate the intersection of two arrays - return result as a `Set` object
    and use the `size` method of the `Set` to determine if we made a match when
    testing the arrays..
*/
const intersect=function(a,b){
    return new Set( a.filter( v => ~b.indexOf( v ) ) );
};

const gettowncity=function( addcomp ){
    if( typeof( addcomp )=='object' && addcomp instanceof Array ){

        let order=[ 'sublocality_level_1', 'neighborhood', 'locality', 'postal_town' ];

        for( let i=0; i < addcomp.length; i++ ){
            let obj=addcomp[ i ];
            let types=obj.types;
            if( intersect( order, types ).size > 0 )return obj;
        }
    }
    return false;
};



In the callback function of the Geocoder request:

if( status == google.maps.GeocoderStatus.OK ){
    let addcomp = results[0].address_components;
    let obj = gettowncity( addcomp );

    if( obj ) console.info( 'Town/City: %o', obj.long_name );

    /* ... other code ... */
}

A variation on the gettowncity adds a second parameter of the types to look for in the response object

const findcomponent=function( addcomp, arr ){
    if( typeof( addcomp )=='object' && addcomp instanceof Array ){
        for( let i=0; i < addcomp.length; i++ ){
            let obj=addcomp[ i ];
            let types=obj.types;
            if( intersect( arr, types ).size > 0 )return obj;
        }
    }
    return false;
};

let obj=findcomponent( addcomp, [ 'postal_code' ] );
if( obj ) console.info( 'Postcode: %s', obj.long_name )

How to get city name using Google Maps API

1 Answers1