All geek questions in one place

How to extract city, country, latitude and longitude from google places result

I use the following Google Places script to get the user's location. I get the full address, but I need to parse the result to get the 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 tried the below script, but it does not work all the time, as in some cases the address format is different.

var city = place.address_components[0] && place.address_components[0].short_name || '';
        document.getElementById('lblResult').innerHTML = location;
        console.log(city);
+4
source share
2 answers

If you look at console.log(place);, you will see something like ...

enter image description here

address_components. , , , . , , - API Google .

. city , postal_town locality .

, city country, .

- Google , , .

+6

Lodash, , , .

, , Google :

ES5 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;

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');
+1

Source: https://habr.com/ru/post/1626952/

More articles:


All Articles