Get only city and state from Google Maps API Reverse Geocoder

citystategeo.js

if (window.navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(function (position) {
		var lat 	 = position.coords.latitude,
			lng 	 = position.coords.longitude,
			latlng 	 = new google.maps.LatLng(lat, lng),
			geocoder = new google.maps.Geocoder();
		geocoder.geocode({'latLng': latlng}, function(results, status) {
			if (status == google.maps.GeocoderStatus.OK) {
				if (results[1]) {
					for (var i = 0; i < results.length; i++) {
						if (results[i].types[0] === "locality") {
							var city = results[i].address_components[0].short_name;
							var state = results[i].address_components[2].short_name;
							$("input[name='location']").val(city + ", " + state);
						}
					}
				}
				else {console.log("No reverse geocode results.")}
			}
			else {console.log("Geocoder failed: " + status)}
		});
	},
	function() {console.log("Geolocation not available.")});
}

this did not work for me ... try this...

for (var ac = 0; ac < results[0].address_components.length; ac++) {
                                    var component = results[0].address_components[ac];

                                    switch(component.types[0]) {
                                        case 'locality':
                                            storableLocation.city = component.long_name;
                                            break;
                                        case 'administrative_area_level_1':
                                            storableLocation.state = component.short_name;
                                            break;
                                        case 'country':
                                            storableLocation.country = component.long_name;
                                            storableLocation.registered_country_iso_code = component.short_name;
                                            break;
                                    }
                                };

Hey l0c0luke

Apologize for late reply but you solution just rocked man. Than you so much.

Hey l0c0luke,

Your code worked for me. Thank you.

Great job!!

I've forked it in order to make some improvements just in the case that you need city + state once. There is the link if someone needs: https://gist.github.com/dody87/12897208a72147c2319c0bf7cbc200ad

Thanks.

@l0c0luke Nice work.

Thank's for share!

@l0c0luke thanks I had to modify your code a bit because I was finding that the first parameter in the types array wasn't always the one we were looking for in the switch statement. For example the types array that includes sublocality looked like this ["political", "sublocality", "sublocality_level_1"]. The Array.includes() method helped improve accuracy.

I also wasn't able to find 'locality' as an array element. Google labeled my city as a 'sublocality'.

let storableLocation = {};

for (var ac = 0; ac < results[0].address_components.length; ac++) {
    
   var component = results[0].address_components[ac];
    
   if(component.types.includes('sublocality') || component.types.includes('locality')) {
        storableLocation.city = component.long_name;
   }
   else if (component.types.includes('administrative_area_level_1')) {
        storableLocation.state = component.short_name;
   }
   else if (component.types.includes('country')) {
        storableLocation.country = component.long_name;
        storableLocation.registered_country_iso_code = component.short_name;
   }

};

@celsowhite This worked for me, thanks!

@celsowhite Thanks

London-UK requires postal_town after locality

There is no accuracy to build combination of city_name with their state_name, I have try to build below code for with accuracy. Its work for Multiple Countries... Try it and give review also....

var x, lat, lng, city, state, country, geocoder, latlng;

$(document).ready(function() {
    getLocation();
});

x = document.getElementById("demo");

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition, showError);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    lat = position.coords.latitude;
    lng = position.coords.longitude;
    // inprange = parseInt($('#range_3').prop("value") * 1000);
    geocodeLatLng(lat, lng);
}

function showError(error) {
    switch (error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation.";
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable.";
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out.";
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred.";
            break;
    }
}

function geocodeLatLng(lat, lng) {
    geocoder = new google.maps.Geocoder();
    latlng = new google.maps.LatLng(lat, lng);
    geocoder.geocode({
        'latLng': latlng
    }, function(results, status) {
        if (status === 'OK') {
            if (results[1]) {
                console.log(results);
                for (var i = 0; i < results[0].address_components.length; i++) {
                    for (var b = 0; b < results[0].address_components[i].types.length; b++) {
                        switch (results[0].address_components[i].types[b]) {
                            case 'locality':
                                city = results[0].address_components[i].long_name;
                                break;
                            case 'administrative_area_level_1':
                                state = results[0].address_components[i].long_name;
                                break;
                            case 'country':
                                country = results[0].address_components[i].long_name;
                                break;
                        }
                    }
                }
                x.innerHTML = 'City = ' + city + ', ' + 'State = ' +  state + ', ' + 'Country = ' +  country;
            } else {
                alert("No results found");
            }
        } else {
            alert("Geocoder failed due to: " + status);
        }
    });
}

@rickyriccs Thanks. Its working for me

@celsowhite thank you, it works.

@celsowhite Thanks