Google maps api Auto Complete for country

Question

I want to get address only in specific country if it was choosen. My code is:

var country="";
    $("select[name='country_id']").change(function () {
        co=$("select[name='country_id']").val();

    });
    function initialize() {
        var options={};
        if(country){
         options = {
                types: ['geocode'],
                componentRestrictions: {country: country}
            };
        }else{
            options = {
                types: ['geocode']
            };
        }

        var input = document.getElementById('address');
        var autocomplete = new google.maps.places.Autocomplete(input,options);

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
        //...
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

But my country value is always empty. How can I process country for getting its value? Help me, please. Thanks!

Answer 1

You have to initialize autocomplete every time with new country onchange

Fiddle demo

JS

var country = "";
$("select[name='country_id']").change(function() {
  country = $("select[name='country_id']").val();
  $('#searchTextField').attr('placeholder','search form '+$("select[name='country_id'] option:selected").text())
  $('#input').show();
  initialize()
});

function initialize() {
  var input = document.getElementById('searchTextField');
  var options = {
    componentRestrictions: {
      country: country
    }
  };

  var autocomplete = new google.maps.places.Autocomplete(input, options);

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

    var place = autocomplete.getPlace();
    var lat = place.geometry.location.lat();
    var long = place.geometry.location.lng();
    alert(lat + ", " + long);

  });
}