Menu
I am using the following Google Places script to get the location of the user. I get the full address, but I need to parse the result to get city, country.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Google Places Autocomplete textbox using google maps api</title>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<script type="text/javascript">
google.maps.event.addDomListener(window, 'load', initialize);
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtAutocomplete'));
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
var location = "<b>Address</b>: " + place.formatted_address + "<br/>";
location += "<b>Latitude</b>: " + place.geometry.location.lat() + "<br/>";
location += "<b>Longitude</b>: " + place.geometry.location.lng();
document.getElementById('lblResult').innerHTML = location;
});
}
</script>
<span>Location:</span>
<input type="text" id="txtAutocomplete" style="width: 300px" placeholder="Enter your address" /><br /><br />
<label id="lblResult" />
</body>
</html>
I've tried the below script, but it does not work all the time as in some cases, address format is different.
var city = place.address_components[0] && place.address_components[0].short_name || '';
document.getElementById('lblResult').innerHTML = location;
console.log(city);
562
To find a location using its latitude and longitude on any device, just open Google Maps. On your phone or tablet, start the Google Maps app. On a computer, go to Google Maps in a browser. Then enter the latitude and longitude values in the search field — the same one you would ordinarily use to enter an address.
2) Make another web-service call to https://maps.googleapis.com/maps/api/place/details/json?key=API_KEY&placeid=place_id_retrieved_in_step_1. This will return a JSON which contains address_components . Looping through the types to find locality and postal_code can give you the city name and postal code.
If you have a look at console.log(place); you'll see something like...
The returned object contains address_components. This is an array which is created from the available data so you can't guarantee what fields it will contain. More details about what is returned can be found in the description of the Google Places API Web Service.
You need to loop through the array and extract out the fields that you need. city may not exist but postal_town or locality might in which case you'll want to use those values instead.
Bear in mind that you may not get any value for city or country if that data is not available.
There is some sample code on the Google Developers Site which does most of what you need.
123
I like to use Lodash, because it provides defense against errors when a property is missing, or the passed-in value is not the expected type.
While I'm sure there's more elegant ways, I've developed this method for plucking certain pieces of information from Google Places information:
ES5 version Fiddle:
var address = place.address_components;
var city, state, zip;
address.forEach(function(component) {
var types = component.types;
if (types.indexOf('locality') > -1) {
city = component.long_name;
}
if (types.indexOf('administrative_area_level_1') > -1) {
state = component.short_name;
}
if (types.indexOf('postal_code') > -1) {
zip = component.long_name;
}
});
var lat = place.geometry.location.lat;
var lng = place.geometry.location.lng;
Utilizing Lodash:
var address = _.get(place, 'address_components');
var city, state, zip;
_.forEach(address, function (component) {
let types = _.get(component, 'types');
if (_.includes(types, 'locality')) {
city = _.get(component, 'long_name');
}
if (_.includes(types, 'administrative_area_level_1')) {
state = _.get(component, 'short_name');
}
if (_.includes(types, 'postal_code')) {
zip = _.get(component, 'long_name');
}
});
var lat = _.get(place, 'geometry.location.lat');
var lng = _.get(place, 'geometry.location.lng');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
