i am using google map api v3 for gmap automplete. may i ask how to set the biased country and city from another address dynamically?

this is my existing code:

<script>
    function initialize() {
        var input_location = document.getElementById('id_location');
        var options_location = {
            ponentRestrictions: {country: 'fr'}
        };
        var autoplete_location = new google.maps.places.Autoplete(input_location);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

From above you can see i restrict the search to france.

But how about i want to change the country based on another address?

example: Geneva International Airport, Grand-Saconnex, Switzerland

Thanks a lot

edit:

one more question ( but this question is closely related with what i am asking above, so i do not ask a new q.) what if the addres is different? example: a1: brazil a2: Geneva International Airport, Grand-Saconnex, Switzerland

from the address_ponents, i should not always extract the second element as the country.

edit2:

problem solved. i wrote a for loop to check if 'country' is in types to get the country code:

geocoder.geocode({address: address}, function (result, status) {
                if (status === 'OK' && result.length > 0) {
                    var i = 0;
                    len = result[0].address_ponents.length;
                    for (; i < len; i++){
                        if (result[0].address_ponents[i].types.indexOf('country') >= 0) {
                            c_code = result[0].address_ponents[i].short_name;
                        }
                    }

                    var options = {
                        ponentRestrictions: {country: c_code }
                    };

                    var input_location = document.getElementById('id_location');
                    var autoplete_location = new google.maps.places.Autoplete(input_location, options);

                }
            })

i am using google map api v3 for gmap automplete. may i ask how to set the biased country and city from another address dynamically?

this is my existing code:

<script>
    function initialize() {
        var input_location = document.getElementById('id_location');
        var options_location = {
            ponentRestrictions: {country: 'fr'}
        };
        var autoplete_location = new google.maps.places.Autoplete(input_location);

    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

From above you can see i restrict the search to france.

But how about i want to change the country based on another address?

example: Geneva International Airport, Grand-Saconnex, Switzerland

Thanks a lot

edit:

one more question ( but this question is closely related with what i am asking above, so i do not ask a new q.) what if the addres is different? example: a1: brazil a2: Geneva International Airport, Grand-Saconnex, Switzerland

from the address_ponents, i should not always extract the second element as the country.

edit2:

problem solved. i wrote a for loop to check if 'country' is in types to get the country code:

geocoder.geocode({address: address}, function (result, status) {
                if (status === 'OK' && result.length > 0) {
                    var i = 0;
                    len = result[0].address_ponents.length;
                    for (; i < len; i++){
                        if (result[0].address_ponents[i].types.indexOf('country') >= 0) {
                            c_code = result[0].address_ponents[i].short_name;
                        }
                    }

                    var options = {
                        ponentRestrictions: {country: c_code }
                    };

                    var input_location = document.getElementById('id_location');
                    var autoplete_location = new google.maps.places.Autoplete(input_location, options);

                }
            })

• javascript
• google-maps-api-3

• 1 It might help to know from where you get the other address. – hennes Commented Aug 31, 2014 at 12:58
• from another text or from another django object in template example: {{ party.location }} thanks – user2673206 Commented Sep 1, 2014 at 3:07
• So is your problem how to get the country code out of that address or how to apply the country code to the autoplete? – hennes Commented Sep 1, 2014 at 6:35
• how to get the country code out of that address thanks – user2673206 Commented Sep 1, 2014 at 13:14

3 Answers 3

Use the setComponentRestrictions() method of the Autoplete class. See the documentation.

var country = 'fr';
var autoplete_location = new google.maps.places.Autoplete(input_location);

autoplete_location.setComponentRestrictions({'country': country});

Basically you have two options: create a static mapping or use geocoding.

Static Mapping

Just setup an object that statically maps country long names (like Switzerland) to short names (like CH). Afterwards, determine the country long name from your address by means of mon string manipulation functions. You can then simply look up the short name in the mapping object.

var countries = {
    'switzerland': 'CH',
    'germany': 'DE',
    ...
}

var address = 'Geneva International Airport, Grand-Saconnex, Switzerland';
var country = address.substring(address.lastIndexOf(',') + 1);
var code = countries[country.trim().toLowerCase()];

Note that this option does only work if you know all of the countries upfront.

Geocoding

Another way to approach your problem is to geocode the address string and then read the country code from the response.

var geocoder = new google.maps.Geocoder();
geocoder.geocode({
    address: 'Geneva International Airport, Grand-Saconnex, Switzerland'
}, function(result, status) {
    if (status === 'OK' && result.length > 0) {
        var code = result[0].address_ponents[2].short_name;
    }
});

This alternative does not require you to know all the countries upfront. There is, however, a rate limit in the geocoding API which you might run into.

Since it may be difficult to change multiple options, it might be better to remove previous listener and create new one with changed options.

Clear current listener:

var autopleteField = document.getElementById("autoplete");
google.maps.event.clearInstanceListeners(autopleteField);

Add new listener depending on e.g. checkbox:

var onlySlovakia = document.getElementById("checkboxOnlySlovakia");

// mon restriction
var options = {}

if(onlySlovakia.value == "1"){
    // we want more detailed suggestions
    options.ComponentRestrictions = {country : 'sk'};
    options.types: ['geocode', 'establishment']
}else{
    options.types: ['geocode']
}

// create instance
handle = new google.maps.places.Autoplete(autopleteField, options);

// add listener with new options
google.maps.event.addListener(handle, 'place_changed', function() {
    var place = handle.getPlace();
    ... process results ...
});

See also API event namespace.