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);
}
})
Share
Improve this question
edited Sep 2, 2014 at 12:59
user2673206
asked Aug 31, 2014 at 9:58
user2673206user2673206
2152 silver badges12 bronze badges
4
- 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
Reset to default 10Use 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.