How to retrieve a component from Google AutoComplete?

[toplisek]

I try to retrieve a component from Google API and Geo Autocomplete.
How to retrieve City, Country, Street name, Street number, Postal code?
Need help.

var searchInput = 'search_input';

 $(document).ready(function ()
  {
  var autocomplete;
  autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)),
   {
   types:['geocode'],
   }
  );

  google.maps.event.addListener(autocomplete, 'place_changed', function ()
   {
   var near_place = autocomplete.getPlace();
   document.getElementById('latvalue').value = near_place.geometry.location.lat();
   document.getElementById('lngvalue').value = near_place.geometry.location.lng();

   document.getElementById('latshow1').innerHTML = near_place.geometry.location.lat();
   document.getElementById('lngshow1').innerHTML = near_place.geometry.location.lng();
   }
  );
  }
 );

[NickMNS]

I'm going to guess that the problem is in this line:

 google.maps.event.addListener(autocomplete, 'place_changed', function ()

try this instead:

 autocomplete.addEventListener('place_changed', function ()

The line

 autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)), 

creates a new Google maps object, you then use that object to interact with Google maps.

Now if this doesn't solve the issue. Then please provide the errors thrown in the console so we can know what exactly is not working.

[toplisek]

I have gathered variables. Can be improved?

var placeSearch, autocomplete, autocomplete_postalcode, autocomplete_city;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};
var map;

var searchInput = 'search_input';

$(document).ready(function ()
 {
 var autocomplete;
 autocomplete = new google.maps.places.Autocomplete((document.getElementById(searchInput)),
 {
 types:['geocode'],
 }
 );

 /*google.maps.event.addListener(autocomplete, 'place_changed', function ()*/
 autocomplete.addEventListener('place_changed', function ()
 {
 var near_place = autocomplete.getPlace();
 document.getElementById('latvalue').value = near_place.geometry.location.lat();
 document.getElementById('lngvalue').value = near_place.geometry.location.lng();

 document.getElementById('latshow1').innerHTML = near_place.geometry.location.lat();
 document.getElementById('lngshow1').innerHTML = near_place.geometry.location.lng();
 }
 );


 autocomplete_postalcode = new google.maps.places.Autocomplete(
 (document.getElementById("AutocompletePostalCode")), {
 types:['(regions)'],
 componentRestrictions: {country: 'de'}
 }
 );
 google.maps.event.addListener(autocomplete_postalcode, 'place_changed', function()
 {
 var place = autocomplete_postalcode.getPlace();
 console.log('place: ' + place);
 }
 );

 autocomplete_city = new google.maps.places.Autocomplete(
 (document.getElementById('AutocompleteCity')), {
 types:['(cities)'],
 componentRestrictions: {country: 'de'}
 }
 );
 google.maps.event.addListener(autocomplete_city, 'place_changed', function()
 {
 var place = autocomplete_city.getPlace();
 console.log('place from city search: ' + place);
 }
 );

 }
);