CODEWITHSUNDEEP
javascriptautocompletegoogle-places-api
KDJ
KDJ

Reputation: 79

google places autocomplete API get town and region (JavaScript)

I think this is a new question and I have some example code.

The code for google places autocomplete API is:

      function initialize() {
        var input = document.getElementById('searchField');
        var options = {
        componentRestrictions: {
        country: ['uk', 'ie']
        }
      };
      var autocomplete = new google.maps.places.Autocomplete(input, options);
      google.maps.event.addListener(autocomplete, 'place_changed', 
      function() {
         var place = autocomplete.getPlace();
         var placeStreet = autocomplete.getPlace()[0];
         var place_ = place.name;
         var lat_ = place.geometry.location.lat();
         var long_ = place.geometry.location.lng();
         alert(place + ", street:  " + placeStreet + ", " + place_ + ", " + 
         lat_ + ", " + long_);

       });
     }

How do I get the town or region or country. As I'm from the UK, I need to detect town such as london, region or county = middlesex and country = United Kingdom. Is there anyway to do this? and how do I find the printout of getPlace() how do I get the Javascript object printed out.

Thanks in advance

***EDIT JSON.stringify(autocomplete.getPlaces()) prints out the object but how do I extract town, region, country etc.

*** EDIT In my autocomplte my json object prints out objects in different orders so finding the 3 rd object will be postal town or administrative area. How do I search by type and get type country and the country or type postal_town and town. My json outputs are:

1)

     {
      "address_components": [
      {
      "long_name": "12-20",
      "short_name": "12-20",
      "types": [
       "street_number"
      ]
      },
      {
      "long_name": "Wood Street",
      "short_name": "Wood St",
      "types": [
       "route"
       ]
      },
      {
       "long_name": "Walthamstow",
        "short_name": "Walthamstow",
        "types": [
        "neighborhood",
        "political"
       ]
     },
     {
      "long_name": "London",
      "short_name": "London",
       "types": [
       "postal_town"
      ]
      }, etc

2)

 {
    "address_components": [
    {
     "long_name": "London",
      "short_name": "London",
     "types": [
      "locality",
      "political"
    ]
   },
   {
  "long_name": "London",
  "short_name": "London",
  "types": [
    "postal_town"
  ]
    },
     {
        "long_name": "Greater London",
        "short_name": "Greater London",
        " types": [
        "administrative_area_level_2",
       "political"
     ]
     },

Upvotes: 3

Views: 13134

Answers (2)

Marian Kosaniak
Marian Kosaniak

Reputation: 191

This is how you can get city and state:

const city = place.address_components.filter(f => JSON.stringify(f.types) === JSON.stringify(['locality', 'political']))[0].short_name;
const state = place.address_components.filter(f => JSON.stringify(f.types) === JSON.stringify(['administrative_area_level_1', 'political']))[0].short_name;
const displayCity = place.address_components.filter(f => JSON.stringify(f.types) === JSON.stringify(['locality', 'political']))[0].long_name;
const displayState = place.address_components.filter(f => JSON.stringify(f.types) === JSON.stringify(['administrative_area_level_1', 'political']))[0].long_name;

Upvotes: 4

AL-zami
AL-zami

Reputation: 9066

I am not sure what you meant by town and region but you may try the following as i did to get city and state of a selected place

for town you can try : locality or sublocality_level_1 property.If locality returns no result use sublocality_level_1, I suggest try both

and for region you may try : administrative_area_level_1

and for country use : country

Here's the api documentation : place autocomplete api documentation

Update :

Here's what you should do :

1.First you should get the address_component from response 

    var place = autocomplete.getPlace().address_components

    //it will give you an array of objects which has a type property.This type property holds different components of your address.Loop through it to get your desired component

    address_component = [
      {
        "long_name" : "Australia",
        "short_name": "Aus",
        "types" : ["country"]
      },
      {
        "long_name" : "Pyrmont",
        "short_name" : "Pyrmont",
        "types" : [ "locality", "political" ]
      },
      {
        "long_name" : "Council of the City of Sydney",
        "short_name" : "Sydney",
        "types" : [ "administrative_area_level_2", "political" ]
      },
      {
        "long_name" : "New South Wales",
        "short_name" : "NSW",
        "types" : [ "administrative_area_level_1", "political" ]
      }

]

you will loop through and find the types you need and get short_name or long _name and show it to the screen.If you understand this, you are good to go.If not you can ask me .Check all the components available Place Details

CODE :

declare a component map which will house the components you want to use only

   var componentMap = {
        country: 'country',
        locality: 'locality',
        administrative_area_level_1 : 'administrative_area_level_1',
    };

    for(var i = 0; i < place.length; i++){

        var types = place[i].types; // get types array of each component 

        for(var j = 0; j < types.length; j++){ // loop through the types array of each component as types is an array and same thing can be indicated by different name.As you can see in the json object above 

              var component_type = types[j];

              // check if this type is in your component map.If so that means you want this component

              if(componentMap.hasOwnProperty(component_type)){


                console.log(place[i]['long_name']);

              }
        }
    }

Upvotes: 7

Related Questions