Get City and Country name by coordinates via Google Maps api

coordinatestoname.js

// Demo: http://jsfiddle.net/xuyp8qb5/
// Note: You need Google Map API Key to run demo; bit.ly/2pBgToW

var latlng;
latlng = new google.maps.LatLng(40.730885, -73.997383); // New York, US
//latlng = new google.maps.LatLng(37.990849233935194, 23.738339349999933); // Athens, GR
//latlng = new google.maps.LatLng(48.8567, 2.3508); // Paris, FR
//latlng = new google.maps.LatLng(47.98247572667902, -102.49018710000001); // New Town, US
//latlng = new google.maps.LatLng(35.44448406385493, 50.99001635390618); // Parand, Tehran, IR
//latlng = new google.maps.LatLng(34.66431108560504, 50.89113940078118); // Saveh, Markazi, IR

new google.maps.Geocoder().geocode({'latLng' : latlng}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
            var country = null, countryCode = null, city = null, cityAlt = null;
            var c, lc, component;
            for (var r = 0, rl = results.length; r < rl; r += 1) {
                var result = results[r];

                if (!city && result.types[0] === 'locality') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'locality') {
                            city = component.long_name;
                            break;
                        }
                    }
                }
                else if (!city && !cityAlt && result.types[0] === 'administrative_area_level_1') {
                    for (c = 0, lc = result.address_components.length; c < lc; c += 1) {
                        component = result.address_components[c];

                        if (component.types[0] === 'administrative_area_level_1') {
                            cityAlt = component.long_name;
                            break;
                        }
                    }
                } else if (!country && result.types[0] === 'country') {
                    country = result.address_components[0].long_name;
                    countryCode = result.address_components[0].short_name;
                }

                if (city && country) {
                    break;
                }
            }

            console.log("City: " + city + ", City2: " + cityAlt + ", Country: " + country + ", Country Code: " + countryCode);
        }
    }
});

Awesome... :)
Thanks man...
Exactly what i wanted.

Even better solution:

if (status == google.maps.GeocoderStatus.OK) { if (results[0]) { var add= results[0].formatted_address ; var value=add.split(","); count=value.length; country=value[count-1]; state=value[count-2]; city=value[count-3]; alert("city name is: " + city); } else { alert("address not found"); } } else { alert("Geocoder failed due to: " + status); }

@dbelieves your answer is totally wrong. Have you checked the output of your code?

Thanks your code works fine,
but you have not extracted State name could you help me do so, I have tried a couple of ways to do it but I am not getting proper state name always.

At this time your sample at http://jsfiddle.net/1yom6brx/1/ outputs empty results

@marciano1 API-KEY is mandatory for GoogleMap now. You have to add your api key to googlemap js url:
https://developers.google.com/maps/documentation/geocoding/get-api-key

@AmirHossein . Thanks for your answer. I already had included but the key had some limitations. What about using https://maps.googleapis.com/maps/api/geocode/json?latlng=&key= instead of your https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=false&sensor=false&key= to get more data ?

@marciano1 Unfortunately i have not api key to test it right now. if other endpoint provides same data then you could gist above as it is.
Else you could use check google json by tests on top of the gist (commented lines); they are various data which if your script could pass them, then it will work for lots of cases.

@AmirHossein I created a test file with your html and js
I got 2 warnings about deprecations (sensor-not-required and Signed-In-Not-Supported)
Console log: City: New York, City2: null, Country: United States, Country Code: US as expected but the 4 < li > items are empty.
I don't realize what's happening, I also posted I guess a related question https://support.google.com/maps/thread/9639022?hl=en

@marciano1 i just signed up for a api key and tested gist once, it worked well for "New York, US" example. Unfortunately unpaid api-key allow only 1 request per day (OMG!!), so i couldn't test it more.

btw it seems working (code and library); You could remove sensor and signed_in from querystring to avoid warnings.

@marciano1 if you still have problem, you could send me an email.

Strange you only have 1 request/day. Google gives me usd 200 every month and after that 1000 requests cost $5 or something like that.
I only am having few requests/month with Maps api in a private photo family website. Photos uploaded with geodata are able to display the place in a map where they were taken. Now I'd like to add more data below thumbnails like Place, Street, Region, City, State and Country at most. As I explain in that support.google.com question JS loads a lot of geo info but I cannot use it because an error I don't know how to fix Unexpected token ':'. Parse error. I google that error msg but didn't find anything useful. Anyway thanks for your help.

@marciano1 i can't tell anything without codes. You have to find Unexpected token character...

@AmirHossein Here's where I've explained days ago: https://support.google.com/maps/thread/9639022?hl=en

@AmirHossein I also have posted https://stackoverflow.com/questions/57128263/reverse-geolocation-loading-api-geocode-i-get-syntaxerror-unexpected-token but I didn't get even a comment.
Your code works okay for me. I'd ask you please to reformulate JS to only get the output of "formatted_address".
From Safari/debugger/sources/Geocode.service.search I see lot of data loaded but formatted_address is a good summary for me: Thank you!

@marciano1 As i told you i have a valid api key to check and develop code. Send me an email if you could share more details.

Hi Amir, From your exactly code, only changing coordinates I get some data starting as What I asked at gitub is to output the last line of this screenshot: "formatted adress". Something like /document.getElementById("my_div_name").innerHTML = ..../ Thanks a lot, Daniel

…

On 23/7/19 11:56, Amir Hossein Hodjati Pour wrote: @marciano1 <https://github.com/marciano1> As i told you i have a valid api key to check and develop code. Send me an email if you could share more details. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <https://gist.github.com/92a0597b5f723b19c648?email_source=notifications&email_token=ABM2EZLPLJK4NTD5DCXJHQDQA4LYTA5CNFSM4H7JLKT2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAFVY7C#gistcomment-2978289>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABM2EZKFIBJNANVKKSNLVBTQA4LYTANCNFSM4H7JLKTQ>.

Thank you brother!

Thanks

HI guys is there any possible for getting specific city based area search using google maps auto complete fields. Kindly Help me this

Thanks. Really helpful.

in some cases locality doesn't have the city as per the google documentation, how to tackle that

Thanks, Really helpful. ^_^

Great Code ,can we find neighborhood and street

Map & Filter Types

const GEOCODE_API = 'https://maps.googleapis.com/maps/api/geocode/json';
const GEOCODE_KEY = 'YOUR_API_KEY';

export default async function (position) {
  try {
    const coords = `${position.latitude}, ${position.longitude}`;
    const url = `${GEOCODE_API}?latlng=${coords}&key=${GEOCODE_KEY}`;

    const types = {
      // https://developers.google.com/maps/documentation/places/web-service/supported_types#table2
      administrative_area_level_1: 'custom_1',
      administrative_area_level_2: 'custom_2',
      country: 'custom_3',
      postal_code: 'custom_4',
    };

    const response = await axios.get(url);

    if (response.data.status === 'OK') {
      const result = {};

      if (response.data.results[0]) {
        if (response.data.results[0].address_components) {
          response.data.results[0].address_components.map(address => {
            if (address.types[0]) {
              if (types[address.types[0]]) {
                result[types[address.types[0]]] = address.long_name;
              }
            }
          });
        }
      }

      return result;
    }
  } catch (e) {
    console.log(e);
  }
}

Output:

{
    "custom_1": "California",
    "custom_2": "Santa Clara County",
    "custom_3": "Amerika Birleşik Devletleri",
    "custom_4": "94043"
}

Default

export default async function (position) {
  try {
    const coords = `${position.latitude}, ${position.longitude}`;
    const url = `${GEOCODE_API}?latlng=${coords}&key=${GEOCODE_KEY}`;

    const response = await axios.get(url);

    if (response.data.status === 'OK') {
      const result = {};

      if (response.data.results[0]) {
        if (response.data.results[0].address_components) {
          response.data.results[0].address_components.map(address => {
            if (address.types[0]) {
              result[address.types[0]] = address.long_name;
            }
          });
        }
      }

      return result;
    }
  } catch (e) {
    console.log(e);
  }
}

Output:

{
    "street_number": "1600",
    "route": "Amphitheatre Parkway",
    "locality": "Mountain View",
    "administrative_area_level_2": "Santa Clara County",
    "administrative_area_level_1": "California",
    "country": "Amerika Birleşik Devletleri",
    "postal_code": "94043"
}

Fetch All & Map & Filter Types

export default async function (position) {
  try {
    const coords = `${position.latitude}, ${position.longitude}`;
    const url = `${GEOCODE_API}?latlng=${coords}&key=${GEOCODE_KEY}`;

    const response = await axios.get(url);

    const types = {
      administrative_area_level_1: '_administrative_area_level_1',
      administrative_area_level_2: '_administrative_area_level_2',
      country: '_country',
      locality: '_locality',
      plus_code: '_plus_code',
      postal_code: '_postal_code',
      premise: '_premise',
      route: '_route',
      street_number: '_street_number',
    };

    if (response.data.status) {
      const output = {};
      if (response.data.results.length > 0) {
        response.data.results.map(result => {
          if (result.address_components.length > 0) {
            result.address_components.map(address => {
              if (address.types[0]) {
                if (types[address.types[0]]) {
                  if (!output[types[address.types[0]]]) {
                    output[types[address.types[0]]] = address.long_name;
                  }
                }
              }
            });
          }
        });
      }

      return output;
    }
  } catch (e) {
    console.log(e);
  }
}

Output:

{
    "_street_number": "1600",
    "_route": "Amphitheatre Parkway",
    "_locality": "Mountain View",
    "_administrative_area_level_2": "Santa Clara County",
    "_administrative_area_level_1": "California",
    "_country": "Amerika Birleşik Devletleri",
    "_postal_code": "94043",
    "_premise": "Google Building 40",
    "_plus_code": "CWC8+Q9"
}

Thank you brother!