How to limit google autocomplete results to City and Country only
JavascriptAutocompleteGoogle Maps-Api-3Javascript Problem Overview
I am using google autocomplete places javascript to return suggested results for my searchbox , what I need is to only show the city and the country related to the characters entered but google api will give a lot of general places results which I dont need , so how to limit the result to show only city and the country .
I am using the following Example:
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
Javascript Solutions
Solution 1 - Javascript
You can try the country restriction
function initialize() {
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
##More info:
ISO 3166-1 alpha-2 can be used to restrict results to specific groups. Currently, you can use componentRestrictions to filter by country.
The country must be passed as as a two character, ISO 3166-1 Alpha-2 compatible country code.
Officially assigned country codes
Solution 2 - Javascript
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var options = {
types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
var options = {
types: ['geocode'] //this should work !
};
var autocomplete = new google.maps.places.Autocomplete(input, options);
reference to other types: http://code.google.com/apis/maps/documentation/places/supported_types.html#table2
Solution 3 - Javascript
The answer given by Francois results in listing all the cities from a country. But if the requirement is to list all the regions (cities + states + other regions etc) in a country or the establishments in the country, you can filter results accordingly by changing types.
List only cities in the country
var options = {
types: ['(cities)'],
componentRestrictions: {country: "us"}
};
List all cities, states and regions in the country
var options = {
types: ['(regions)'],
componentRestrictions: {country: "us"}
};
List all establishments — such as restaurants, stores, and offices in the country
var options = {
types: ['establishment'],
componentRestrictions: {country: "us"}
};
More information and options available at
https://developers.google.com/maps/documentation/javascript/places-autocomplete
Hope this might be useful to someone
Solution 4 - Javascript
try this
<html>
<head>
<style type="text/css">
body {
font-family: sans-serif;
font-size: 14px;
}
</style>
<title>Google Maps JavaScript API v3 Example: Places Autocomplete</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div>
<input id="searchTextField" type="text" size="50" placeholder="Enter a location" autocomplete="on">
</div>
</body>
</html>
http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places" type="text/javascript"
Change this to: "region=in" (in=india)
"http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places®ion=in" type="text/javascript"
Solution 5 - Javascript
Basically same as the accepted answer, but updated with new type and multiple country restrictions:
function initialize() {
var options = {
types: ['(regions)'],
componentRestrictions: {country: ["us", "de"]}
};
var input = document.getElementById('searchTextField');
var autocomplete = new google.maps.places.Autocomplete(input, options);
}
Using '(regions)' instead of '(cities)' allows to search by postal code as well as city name.
See official documentation, Table 3: https://developers.google.com/places/supported_types
Solution 6 - Javascript
I've been playing around with the Google Autocomplete API for a bit and here's the best solution I could find for limiting your results to only countries:
var autocomplete = new google.maps.places.Autocomplete(input, options);
var result = autocomplete.getPlace();
console.log(result); // take a look at this result object
console.log(result.address_components); // a result has multiple address components
for(var i = 0; i < result.address_components.length; i += 1) {
var addressObj = result.address_components[i];
for(var j = 0; j < addressObj.types.length; j += 1) {
if (addressObj.types[j] === 'country') {
console.log(addressObj.types[j]); // confirm that this is 'country'
console.log(addressObj.long_name); // confirm that this is the country name
}
}
}
If you look at the result object that's returned, you'll see that there's an address_components array which will contain several objects representing different parts of an address. Within each of these objects, it will contain a 'types' array and within this 'types' array, you'll see the different labels associated with an address, including one for country.
Solution 7 - Javascript
I found a solution for myself
var acService = new google.maps.places.AutocompleteService();
var autocompleteItems = [];
acService.getPlacePredictions({
types: ['(regions)']
}, function(predictions) {
predictions.forEach(function(prediction) {
if (prediction.types.some(function(x) {
return x === "country" || x === "administrative_area1" || x === "locality";
})) {
if (prediction.terms.length < 3) {
autocompleteItems.push(prediction);
}
}
});
});
this solution only show city and country..
Solution 8 - Javascript
For country you can use this:
components=country:pak
https://maps.googleapis.com/maps/api/place/autocomplete/json?&input=${text-to-search}&key=${API_KEY}&language=en&components=country:pak
Solution 9 - Javascript
Also you will need to zoom and center the map due to your country restrictions!
Just use zoom and center parameters! ;)
function initialize() {
var myOptions = {
zoom: countries['us'].zoom,
center: countries['us'].center,
mapTypeControl: false,
panControl: false,
zoomControl: false,
streetViewControl: false
};
... all other code ...
}
Solution 10 - Javascript
<html>
<head>
<title>Example Using Google Complete API</title>
</head>
<body>
<form>
<input id="geocomplete" type="text" placeholder="Type an address/location"/>
</form>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ubilabs.github.io/geocomplete/jquery.geocomplete.js"></script>
<script>
$(function(){
$("#geocomplete").geocomplete();
});
</script>
</body>
</html>
For more information visit this link
Solution 11 - Javascript
For cities you can try this
https://maps.googleapis.com/maps/api/place/autocomplete/json?input=new delhi&types=locality&key=Your_API_Key
Response
{
"predictions": [
{
"description": "New Delhi, Delhi, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"reference": "ChIJLbZ-NFv9DDkRzk0gTkm3wlI",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Delhi, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Delhi"
},
{
"offset": 18,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "New Delhi, Madhya Pradesh, India",
"matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"place_id": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"reference": "ChIJF6eOnlmqhTkR2f8IfiLL4bs",
"structured_formatting": {
"main_text": "New Delhi",
"main_text_matched_substrings": [
{
"length": 9,
"offset": 0
}
],
"secondary_text": "Madhya Pradesh, India"
},
"terms": [
{
"offset": 0,
"value": "New Delhi"
},
{
"offset": 11,
"value": "Madhya Pradesh"
},
{
"offset": 27,
"value": "India"
}
],
"types": [
"locality",
"political",
"geocode"
]
},
{
"description": "Delhi, NY, USA",
"matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"place_id": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"reference": "ChIJVS4Od-R43IkRReeLGEBFcv8",
"structured_formatting": {
"main_text": "Delhi",
"main_text_matched_substrings": [
{
"length": 5,
"offset": 0
}
],
"secondary_text": "NY, USA"
},
"terms": [
{
"offset": 0,
"value": "Delhi"
},
{
"offset": 7,
"value": "NY"
},
{
"offset": 11,
"value": "USA"
}
],
"types": [
"locality",
"political",
"geocode"
]
}
],
"status": "OK"
}