Google maps api Auto Complete for specific country?

N

NastyaG2017-05-20 13:23:00

JavaScript

NastyaG, 2017-05-20 13:23:00

Hello. I want to interact with Google maps api Auto Complete on the page. There is a select with countries.
Depending on the selected country, you need to look for an address. I can’t figure out how to transfer the selected country to the settings:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=AIzaSyBQcNRinno7Hp9omOx4P1iPyVe5JzIqQzQ"></script>
</head>
<body>
<label for="locationTextField">Location</label>
<input id="locationTextField" type="text" size="50">

<select class="selCommon" name="country_id">
    <option value="">Select</option>
    <option value="ua">Afghanistan</option>
    <option value="ua">Algeria</option>
    <option value="ua">Argentina</option>
</select>

<script>
    var country="";
    $("select[name='country_id']").change(function () {
        country=$("select[name='country_id']").val();
    });
    function init() {
        var options={
            types: ['geocode'],
            componentRestrictions: {country: country}
        };
        var input = document.getElementById('locationTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);
    }
    google.maps.event.addDomListener(window, 'load', init);
</script>
</body>
</html>

But nothing works like that, my country is empty. How can this be fixed? Thanks in advance!